<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.wrap{
840px;
height: 400px;
background: red;
margin: 0 auto;
}
.content{
190px;
height: 180px;
background: #9C9C9C;
/*相对定位 监管绝对定位*/
position: relative;
overflow: hidden;
}
/*当鼠标移入content容器里，让hide执行*/
.content:hover .hide{
bottom: 0;
}
.imges{
100%;
height: 100%;
transition: .8s;
}
.content:hover .imges{
/*CSS3变换属性*/
transform: scale(1.5);
}
.hide{
/*绝对定位 膨胀 飘了*/
position: absolute;
left: 0;
bottom:-70px;
100%;
height: 70px;
/*rgba(红，绿，蓝，透明度)*/
background-color: rgba(0,0,0,0.5);
/*过渡效果*/
transition: .8s;
}
.hide-content{
padding: 10px;
}
.hide-name{
color: #FFFFFF;
}
.hide-img{
20px;
height: 20px;
/*以宽度的一半为半径画圆*/
border-radius: 50%;
vertical-align: middle;
}
.hide-title{
margin-top: 10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
<img src="img/1.jpg" class="imges"/>
<div class="hide">
<div class="hide-content">
<h5 class="hide-name">暖暖娃娃 米米</h5>
<div class="hide-title">
<img src="img/1.jpg" class="hide-img"/>
<span>微笑向暖@</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>