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

这是一款使用纯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样式代码请参考下载文件。