css3 hover图片效果

在现如今的网页设计中，图片特效越来越受到关注，而CSS3中的hover图片效果能够为网页增添更多的图片魅力。本篇文章将为大家介绍在CSS3中如何实现鼠标悬停图片特效哦。

.img-box {
        position: relative;
     /*父级元素设置相对定位*/    background-color: #fff;
     /*设置背景颜色*/    overflow: hidden;
     /*超出元素隐藏*/    border-radius: 16px;
     /*设置边框圆角*/    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
 /*设置投影*/}
.img-box img {
        transition: all .4s ease-out;
     /*设置图片动画*/    max-width: 100%;
     /*设置图片宽度*/    vertical-align: top;
 /*自定义图片的垂直对齐方式*/}
.img-box:hover img {
        transform: scale(1.15);
     /*设置图片鼠标悬停大小、比例*/    opacity: .8;
 /*设置图片鼠标悬停透明度*/}
.img-box:hover:after {
        content: ';
     /*将悬停后的元素内容设置为空*/    position: absolute;
     /*设置元素为相对于父元素绝对定位*/    left: 0;
     /*距离左侧为0*/    top: 0;
     /*距离顶部为0*/    width: 100%;
     /*宽度为100%*/    height: 100%;
     /*高度为100%*/    background-color: rgba(0, 0, 0, .4);
     /*设置背景颜色及透明度*/    transition: all .6s ease-out;
     /*过渡时间及动画效果*/    opacity: 0;
 /*初始透明度为0*/}
.img-box:hover:after {
        opacity: 1;
 /*悬停后透明度变为1*/}
    

在上述代码中，我们首先设置父级元素的相对定位，来为悬停后出现的元素做准备。然后，通过设置图片等元素的动画、大小、比例、透明度和背景颜色及透明度，来实现图片特效。最后，我们通过悬停后的元素，在过渡时间及动画效果的帮助下，使图片特效更为生动，从而为网页增加更多的图片吸引力。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！