css3鼠标经过，图片放大效果

旧城等待， 2022-07-14 15:29 348阅读 0赞

css代码

/*图片划过改变图片大小效果*/
    .list ul li { width: 228px; height: 270px; overflow: hidden; z-index: 1; position:relative;}
    .list ul li a { }
    .list ul li a img { width: 228px; height: 270px; 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;}
    .list ul li 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);}
    .list ul li a:hover img { transform: scale(1.5, 1.5); -webkit-transform: scale3d(1.5,1.5); transition: .8s transform; -webkit-transition: .8s transform;}
    .list ul li 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); }
    /*结束*/

html代码–

<div class="list">
        <ul>
                <li>
                    <a href="" title="【荣华翡翠】2016.12.13新品翡翠">
                        <img src="./image/shop.png" alt="">
                        <p>【荣华翡翠】2016.12.13新品翡翠</p>
                    </a>
    
                </li>
        </ul>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，348人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

> `transform:scale()`可以实现按比例放大或者缩小功能。 > `transition`可以设置动画执行的时间，实现缓慢或者快速的执行动画 <bo

秒速五厘米/ 2022年09月10日 10:19/ 0 赞/ 244 阅读

相关鼠标经过，图片会放大（从中心位置放大）

js部分： //鼠标经过a标签，对应的图片会放大效果 var zoom = 1.03; var width = $(thi

叁歲伎倆/ 2022年08月06日 12:13/ 0 赞/ 211 阅读

相关 css3鼠标经过，图片放大效果

css代码 /图片划过改变图片大小效果/ .list ul li { width: 228px; height: 270px; overflow: hidde

旧城等待，/ 2022年07月14日 15:29/ 0 赞/ 349 阅读

相关 css3鼠标经过，图片旋转

<style> .navigation:hover .img { -webkit-transition:0.4s linear;transition:0.4s ease

浅浅的花香味﹌/ 2022年06月10日 08:58/ 0 赞/ 276 阅读

相关实现鼠标经过,产品图片的局部放大功能

vue中实例：操作dom实现参考：https://blog.csdn.net/alightman/article/details/78074687 注意点： 1、小图、

た入场券/ 2022年05月23日 01:43/ 0 赞/ 305 阅读

相关鼠标放上去图片放大css

<style type="text/css"> \div1\{ width: 200px; height: 138p

比眉伴天荒/ 2022年05月22日 02:35/ 0 赞/ 279 阅读

相关 CSS3鼠标滑过放大突出效果

原文出处：[https://www.html5tricks.com/css3-hover-scale.html][https_www.html5tricks.com_css3-

￡神魔★判官ぃ/ 2022年05月10日 22:08/ 0 赞/ 300 阅读

相关用CSS3实现放大效果

任务描述本关任务：用CSS3放大效果。效果如下： ![198682][] 相关知识为了完成本关任务，你需要掌握：1.`transform`属性，2.`trans

爱被打了一巴掌/ 2022年04月04日 12:09/ 0 赞/ 466 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 561 阅读

相关用CSS3实现放大效果

用CSS3实现放大效果任务描述相关知识 transform属性 transition属性代码文件任务

﹏ヽ暗。殇╰゛Y/ 2021年05月16日 20:37/ 0 赞/ 691 阅读