图片/图形
图片画廊鼠标滑过图片动画过渡特效
PetitQ
这是一款使用纯 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 样式代码请参考下载文件。
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
