![炫酷企业建站作品展示WordPress中文模板](https://static.22vd.com/wp-content/uploads/2020/12/2020121423190712.jpg)
这是一款使用纯 CSS3 制作的超酷图片画廊鼠标滑过图片动画过渡特效。该特效中,图片使用 flex 来进行网格布局,当鼠标滑过图片时,图片平滑向上移动,下方的图片描述信息被显示出来。
该特效使用嵌套<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>
画廊采用 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主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!