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

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

原创最新推荐文章于 2024-05-23 10:56:36 发布 · 2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #图片 #鼠标

本文介绍了一种使用HTML和CSS实现的图片悬停缩放效果。通过设置特定的CSS样式，图片在鼠标悬停时会放大显示，并伴随背景变化，增强了网页交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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); }