鼠标移过图片时图片放大并伴有高光划过代码

最新推荐文章于 2024-05-23 10:56:36 发布

从html开始的人生

最新推荐文章于 2024-05-23 10:56:36 发布

阅读量1.9k

点赞数 1

文章标签： html css 图片鼠标

本文链接：https://blog.csdn.net/html2016/article/details/52981936

版权

HTML代码

<div class="lineliimg">
        <a href="#"><img src="http://www.iyouguanjia.com/images/temp/i3b.jpg"/>
        <div class="figcaption"></div>
        </a>
        </div>

CSS代码

.line-list-li .lineliimg { width: 380px; height: 202px; overflow: hidden; z-index: 1; position:relative;}
.line-list-li .lineliimg a {}
.line-list-li .lineliimg a img { width: 380px; height: 202px; position: relative; -webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; display: block;}
.line-list-li .lineliimg a .figcaption:before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255,255,255,0.5);content: '';-webkit-transition: -webkit-transform 0.6s;transition: transform 0.6s;-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-110%,0);}
.line-list-li .lineliimg a:hover img { transform: scale(1.5, 1.5);  -webkit-transform: scale3d(1.5,1.5); transition: .8s transform; -webkit-transition: .8s transform;}
.line-list-li .lineliimg a:hover .figcaption:before{-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0);transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,110%,0); }