初始时的效果: 鼠标移动资料卡上之后:
<body>
<div class="students">
<div class="student">
<div class="student_img">
<a href="#"><img src="img/people1.jpeg" alt=""></a>
<div class="img-title">
<h3>Zhang San</h3>
<p>Leader</p>
</div>
</div>
<div class="student_info">
<h3>Zhang San</h3>
<p>Leader</p>
<p>He is a strong man</p>
</div>
</div>
</div>
</body>
.student {
width: 15vw;
height: 20vw;
margin-left: 5vw;
margin-bottom: 5vh;
border-radius: 2em;
float: left;
box-shadow: 0 1vh 2vh rgba(0,0,0,0.30), 0 1vh 1vh rgba(0,0,0,0.22);
}
.img-title > h3,
.student_info > h3 {
font-size: 18px;
font-weight: 500;
margin-top: 0;
margin-bottom: 0;
color: #fff;
}
.img-title {
bottom: 0;
left: 50%;
border-radius: 0em 0em 2em 2em;
opacity: 0.8;
overflow: hidden;
padding: 11px 0 6px;
position: absolute;
text-align: center;
transform: translateX(-50%);
width: 100%;
transition: all .3s ease 0s;
background-color: rgba(45, 62, 80, 0.8);
}
.img-title > p {
color: #fff;
margin-bottom: 0;
}
.student_info > p {
color: #fff;
margin-bottom: 0;
}
.student:hover .img-title {
opacity: 0;
}
.student_info {
left: 0;
position: absolute;
right: 0;
text-align: center;
top: 50%;
transform: translateY(-50%);
width: 100%;
opacity: 0;
transition: all .3s ease 0s;
}
.student:hover .student_info {
opacity: 1;
}
.student:hover .student_img a::before {
height: 100%;
width: 100%;
}
.student_img > a > img {
width: 100%;
height: 100%;
border-radius: 2em;
}
.student_img > a::before {
background: #2d3e50 none repeat scroll 0 0;
border-radius: 2em;
content: "";
opacity: 0.8;
position: absolute;
transition: all 0.3s ease 0s;
width: 0;
height: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
.student_img{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}