纯css3实现鼠标经过图片显示描述的动画效果

接下来我将详细讲解如何使用纯CSS3实现鼠标经过图片显示描述的动画效果：

接下来我将详细讲解如何使用纯CSS3实现鼠标经过图片显示描述的动画效果：

Step 1: HTML结构
首先我们需要建立一个基本的HTML结构，包括一个包裹图片和描述文字的div以及对应的图片和描述文字：

<div class="image-box">
  <img src="image.jpg" alt="图片">
  <div class="text">
    <h3>图片标题</h3>
    <p>图片描述</p>
  </div>
</div>

Step 2: CSS样式
其次，我们需要使用CSS样式对HTML进行布局以及添加动画效果。示例如下：

设置基本样式

.image-box{
    position:relative;
    display:inline-block;
    overflow:hidden;
}
img{
    display:block;
    width:100%;
}
.text{
    position:absolute;
    bottom:-100%;
    width:100%;
    background-color:rgba(0,0,0,0.7);
    color:#fff;
    text-align:center;
    padding:20px;
    transition:bottom 0.4s ease-out;
}

设置鼠标经过时的动画效果

.image-box:hover .text{
    bottom:0;
}

具体来说，我们将图片设置为display:block，使其充满父元素，而.text则设置为position:absolute并将bottom:-100%，即完全隐藏。当鼠标悬停到父元素上时，.text元素的bottom属性将过渡为0，使其完全显示。

Step 3: 示例说明
接下来，我将展示两个示例，为你演示如何实现不同的动画效果。

示例1：左右滑动效果

.text{
    left:-100%;
    transition:left 0.2s ease-in;
}
.image-box:hover .text{
    left:0;
}

在这个示例中，我们将.text元素的left属性从-100%过渡到0，实现类似左右滑动的效果。

示例2：渐变效果

.text{
    opacity:0;
    transition:opacity 0.3s ease-in;
}
.image-box:hover .text{
    opacity:1;
}

在这个示例中，我们将.text元素的opacity属性从0过渡到1，实现类似渐变的效果。

以上就是使用纯CSS3实现鼠标经过图片显示描述的动画效果的完整攻略。