今天来看一组纯CSS实现的鼠标悬停效果,在线研究代码点效果一、效果二、效果三,下载收藏点这里,效果预览点这里。
效果1
效果1的html文件
<div class="pic">
<img src="pic.jpg" alt="">
<span>这里是个标题呀</span>
</div>
css文件中我们主要实现定位和hover动画。
/* 图片盒子的样式,宽高、边框、阴影、位置、鼠标样式、溢出 */
.pic{
width: 500px;
height: 500px;
border: 10px solid #333;
box-shadow: 0 0 10px rgba(0,0,0,.6);
margin: 50px auto;
position: relative;
overflow: hidden;
cursor: pointer;
}
/* 图片标题的样式,宽高、背景色、水平垂直居中、定位,透明度 */
.pic span{
position: absolute;
left: 0;
bottom: 0;
width: 500px;
height: 50px;
background: rgba(0,0,0,.5);
color: #fff;
font-size: 24px;
line-height: 50px;
text-align: center;
opacity: 0;
}
/* 给需要动画的元素加过渡属性 */
.pic img,.pic span{
transition: all .5s;
}
/* hover之后透明动画 */
.pic:hover span{
opacity: 1;
}
/* hover之后图片放大