简单的CSS3鼠标滑过图片标题和遮罩层动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 简单的CSS3鼠标滑过图片标题和遮罩层动画特效
简单的CSS3鼠标滑过图片标题和遮罩层动画特效
分享:

    插件介绍

    这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过 CSS3 transitions 和 transform 属性,在鼠标滑过图片时制作遮罩层和图片标题动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:2016-08-02
    阅读:
简要教程

这是一款使用CSS3制作的简单的鼠标滑过图片标题和遮罩层动画特效。该鼠标滑过特效通过 CSS3 transitions 和 transform 属性,在鼠标滑过图片时制作遮罩层和图片标题动画效果。

使用方法

HTML结构

该鼠标滑过图片特效的HTML结构非常简单:使用一个<div>元素作为图片遮罩层,在里面放置图片的描述信息。

<img src="img/01.jpg" alt="">
<div class="caption">
  <div class="blur"></div>
  <div class="caption-text">
    <h1>图片标题</h1>
    <p>描述信息</p>
  </div>
</div>        
                
CSS样式

第一个DEMO使用透明度opacity属性来制作遮罩层的导入效果,并通过transition来制作平滑过渡动画。

.caption-style-1 li{
  float: left;
  padding: 0px;
  position: relative;
  overflow: hidden;
}

.caption-style-1 li:hover .caption{
  opacity: 1;

}
.caption-style-1 img{
  margin: 0px;
  padding: 0px;
  float: left;
  z-index: 4;
}


.caption-style-1 .caption{
  cursor: pointer;
  position: absolute;
  opacity: 0;
  -webkit-transition:all 0.45s ease-in-out;
  -moz-transition:all 0.45s ease-in-out;
  -o-transition:all 0.45s ease-in-out;
  -ms-transition:all 0.45s ease-in-out;
  transition:all 0.45s ease-in-out;

}
.caption-style-1 .blur{
  background-color: rgba(0,0,0,0.65);
  height: 300px;
  width: 400px;
  z-index: 5;
  position: absolute;
}

.caption-style-1 .caption-text h1{
  text-transform: uppercase;
  font-size: 24px;
}
.caption-style-1 .caption-text{
  z-index: 10;
  color: #fff;
  position: absolute;
  width: 400px;
  height: 300px;
  text-align: center;
  top:100px;
}          
                

其它效果的制作也非常简单,具体请参考下载的源文件。

网友评论