css3悬停效果图片

CSS3是前端开发中常用的技术，它可以为网页设计出丰富多彩的样式效果，其中悬停效果是比较常用的一种，下面我们来介绍关于CSS3悬停效果图片的实现方法。

// HTML代码
<div class="Box">
    <img src="picture.jpg" alt="图片">
    <p>这是一张图片</p>
</div>

// CSS代码
.Box {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative; // 图片必须设置为相对定位
}
.Box img {
    position: absolute; // 常规图片设置为绝对定位
    left: 0;
    top: 0;
    opacity: 1; // 初始透明度为完全不透明
    transition: opacity .3s ease-in-out; // 过渡效果
}
.Box p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    background-color: rgba(0,.5);
    color: #fff;
    opacity: 0; // 初始透明度为完全透明
    transition: opacity .3s ease-in-out; // 过渡效果
}
.Box:hover img {
    opacity: .5; // 鼠标滑过时图片透明度改为50%
}
.Box:hover p {
    opacity: 1; // 鼠标滑过时文字透明度从0到100%
}

在上述代码中，我们先创建了一个div盒子，并在其中嵌入了一张图片和一段文字。然后，我们利用CSS3的transition属性，给图片和文字添加了一个透明度的过渡效果，并将图片设置为相对定位，文字设置为绝对定位，在鼠标滑过盒子时分别改变它们的透明度来实现悬停效果。

总的来说，利用CSS3实现悬停效果图片是比较简单的，只需要在样式中加入过渡效果和改变透明度的方式即可。同时，我们可以通过改变过渡时间以及鼠标滑过时的效果来实现更加丰富的悬停效果。