<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>鼠标悬浮图片</title>
<style type="text/css">
body {
background-color: #444444;
}
/* 大盒子 */
.item-grid {
max-width: 1000px;
margin: 100px auto;
position: relative;
box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
overflow: hidden;
}
/* 小盒子 */
.item {
position: relative;
float: left;
width: 33.33%;
background-color: #000;
overflow: hidden;
}
.item::after {
content: " ";
display: block;
background-color: inherit;
opacity: 0.5;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
/* 没悬浮的时候，隐藏在图片下方 */
transform: translateY(100%);
transition: transform 0.5s ;
}
/* 悬浮后覆盖在图片上面*/
.item:hover:after {
transform: translateY(0%) ;
}
.item:hover .item-image {
transform: scale(1.1);
}
.item:hover .item-text {
opacity: 1;
transform: translateY(0%);
}
.item-image {
height: auto;
backface-visibility: hidden;
transition: transform 1.2s ;
}
.item-image::before {
content: "";
display: block;
padding-top: 75%;
overflow: hidden;
}
.item-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.item-text {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0.5;
cursor: pointer;
text-align: center;
z-index: 1;
color: #fff;
transition: transform 1s ;
/* 文字初始的位置 */
transform: translateY(40%);
}
.item-text-wrapper {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.item-text-title {
font-size: 36px;
padding: 0 15px;
margin: 5px 0 0 0;
}
.item-text-dek {
font-size: 16px;
opacity: 0.7;
margin: 0;
}
</style>
</head>
<body>
<div class="item-grid">
<div class="item">
<div class="item-image">
<img src="../img/1.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="../img/2.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="../img/3.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="../img/1.1.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="../img/2.1.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
<div class="item">
<div class="item-image">
<img src="../img/3.1.jpg">
</div>
<div class="item-text">
<div class="item-text-wrapper">
<h2 class="item-text-title">我是标题</h2>
<p class="item-text-dek">我是内容</p>
</div>
</div>
</div>
</div>
</body>
</html>
效果如下：
