我试图在鼠标悬停时缩放图像.
我正在获得缩放效果,但图像应该在“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; }
原文地址:https://www.jb51.cc/html/223975.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。