超酷图片画廊鼠标滑过图片动画过渡特效

当前位置:主页 > CSS3库 > UI界面设计 > 超酷图片画廊鼠标滑过图片动画过渡特效
超酷图片画廊鼠标滑过图片动画过渡特效
分享:

    插件介绍

    这是一款使用纯CSS3制作的超酷图片画廊鼠标滑过图片动画过渡特效。该特效中,图片使用flex来进行网格布局,当鼠标滑过图片时,图片平滑向上移动,下方的图片描述信息被显示出来。

    浏览器兼容性

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

这是一款使用纯CSS3制作的超酷图片画廊鼠标滑过图片动画过渡特效。该特效中,图片使用flex来进行网格布局,当鼠标滑过图片时,图片平滑向上移动,下方的图片描述信息被显示出来。

使用方法

HTML结构

该特效使用嵌套<div>的HTML结构,每一个div.gallery-item是一个卡片,里面包含了图片和描述信息。

<div class="container">
  <div class="gallery">
    <div class="gallery-item">
      <!-- 图片 -->
      <div class="gallery-item-image">
            <img src="img/1.jpg">
          </div>
          <!-- 图片描述信息 -->
          <div class="gallery-item-description">
            <h3>Image title</h3><span>......</span></div>
        </div>
    </div>

    ......

  </div>
</div>        
                
CSS样式

画廊采用flex进行布局,这个画廊设置最大宽度和100%的视口高度。

.gallery{
  width: 100%;
  max-width: 960px;
  min-height: 100vh;
  margin: 2rem auto;
  
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}            
                

画廊中的每一个图片卡片都设置了固定的宽度和高度,并设置了一些阴影效果。

.gallery-item{
  box-shadow: 2px 2px 8px -1px #3498DB;
  width: 300px;
  height: 300px;
  margin: 10px;
  background: #000;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}                 
                

图片使用绝对定位,宽度和高度都等于卡片的宽度和高度,并设置了0.5秒的ease过渡动画效果。

.gallery-item-image{
  position: absolute;
  width: 100%;
  height: 100%;
  background: lightblue;
  z-index:20;
  -webkit-transition:all .5s ease;
  transition: all .5s ease;
  bottom:0;
  overflow: hidden;
}                  
                

当鼠标滑过卡片时,移动图片的bottom属性,使图片向上移动。

.gallery-item:hover .gallery-item-image{
  bottom: 80px;
}                 
                

完整的CSS样式代码请参考下载文件。

网友评论