html – 使用css缩放图像
发布时间:2020-12-14 19:40:12 所属栏目:资源 来源:网络整理
导读:我试图在鼠标悬停时缩放图像. 我正在获得缩放效果,但图像应该在“list”标签内放大,而不是在“list”之外. 我该怎么做才能获得像弹出窗口一样的缩放效果. 编辑:我已经将css应用于列表以使其像水平一样: image1 image2 image3 …..在ul和li标签中. 我试过以
我试图在鼠标悬停时缩放图像.
我正在获得缩放效果,但图像应该在“list”标签内放大,而不是在“list”之外. 编辑:我已经将css应用于列表以使其像水平一样: image1 image2 image3 …..在ul和li标签中. 我试过以下代码. <div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;"> <ul id="carousel" class="jcarousel jcarousel-skin-tango"> <li> <a href="#" rel="p1" class="thumbnail_img"> <img src="image.jpg " width="55" height="60" alt="#"/> <span><img src="image.jpg" style="height:100px; width:100px" /></span> </a> </li> <li> <a href="#" rel="p1" class="thumbnail_img"> <img src=" " width="55" height="60" alt="#"/> <span><img src="" style="height:100px; width:100px" /></span> </a> </li> </ul> </div> CSS: .thumbnail_img { position: relative; z-index: 0; /*right:420px;*/ } .thumbnail_img:hover { background-color: transparent; z-index: 100; } .thumbnail_img span img { display: inline-block; margin:-13px 17px 2px -13px; } .thumbnail_img span { position: absolute; visibility: hidden; color: black; text-decoration: none; -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; } .thumbnail_img:hover span { /*CSS for enlarged image on hover*/ visibility: visible; background: transparent; top: 0px; left:5px; -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -o-transform:scale(1.2); opacity: 3; height:auto; width:auto; border:0; } 解决方法
试试这个:
.thumbnail_img img:hover { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5); } 如果你不想溢出李然后添加 .thumbnail_img li { overflow: hidden; } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |