CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失

《CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失》要点：
本文介绍了CSS动画：CSS3实现鼠标移到图片上出现文字标题或提示，鼠标移开文字隐藏消失，希望对您有用。如果有疑问，可以联系我们。

相关主题：CSS2和CSS3特效

现在这个动画效果很常见，就是一张图片，

鼠标移上去，淡出或从各个角度浮出文字标题。鼠标移开这个文字标题又消失。

参效果图：

鼠标移上去出现vephp.com ,移开就恢复到原来状态。

实现这个很容易，直入主题：

1、HTML部分：

<div class="hideImgTitle posrelative">
 <img src="/img/p8/2017052117.jpg" border="0" class="wow bounceIn" alt="vephp.com 教程">
 <a href="#" class="hideTitle">vephp.com 教程</a>
</div>

2、CSS部分：

.posrelative{position: relative;}
.hideImgTitle{
       height:120px;
       overflow: hidden;
}
.hideImgTitle:hover a{
       animation:mymove 1s 1;
       -webkit-animation:mymove 1s 1; /*Safari and Chrome*/
       animation-fill-mode:forwards;
       -webkit-animation-fill-mode:forwards; /* Safari 和 Chrome */
}
@keyframes mymove
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
       from {bottom: -70px;}
       to {bottom: 0px;}
}
.hideTitle{
       display:block;
       width:120px;
       height: 70px;
       padding: 5px;
       background: #9c40e9;
       color:#fff;
       position: absolute;
       bottom: -70px;
       overflow: hidden;
       transition: all 0.3s;
}
.hideTitle:hover{color:#fff;text-decoration: none}

转载请注明本页网址：
http://www.vephp.com/jiaocheng/135.html