代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<style>
.father {
width: 300px;
height: 280px;
border: 1px solid red;
margin: 300px auto;
overflow: hidden;
position: relative;
color: #000000;
font-size: 13px;
}
.father img {
width: 300px;
height: 200px;
background: yellow;
}
.bk {
width: 300px;
height: 200px;
background: #00aced;
opacity: 0.5;
position: absolute;
top: -200px;
left: 0;
transition: all 2s;
}
.father:hover .bk {
top: 0px;
}
.son {
width: 300px;
height: 80px;
background: #00b488;
}
.son1 {
animation: sport 2s ease-in-out;
width: 300px;
height: 80px;
text-align: center;
color: #fff;
padding-top: 18px;
}
@keyframes sport {
0% {
transform: translateY(100px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1
}
}
</style>
</head>
<body>
<div class="father">
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3835734796,1631195054&fm=26&gp=0.jpg">
<div class="bk">
</div>
<div class="son">
<div class="son1">
<div>標題標題</div>
<p>內容內容內容內容內容內容內容內容</p>
</div>
</div>
</div>
</body>
</html>
原理說明：
在最外層設置一個d盒子，限制高度，寬度，超出隱藏，並且使用relative定位。
上面hover效果： 使用transition 改變top的值來實現，先將元素放在框外面，然後hover的時候將top值變成0；
下面自動上移： 使用animation動畫，設置動畫初始向下Y軸下方100px,然後動畫結束，變回原來的位置。
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="webhivers" />
<meta name="format-detection" content="telephone=no">
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>arrow-right</title>
<style>
.container {
width: 1000px;
margin: 0 auto;
}
.move {
position: relative;
margin-left: -16px;
animation-name: move;
animation-duration: 1.5s;
/*完成一個週期需要的時間 */
animation-fill-mode: both;
/* 屬性規定動畫在播放之前或之後，其動畫效果是否可見
none 不改變默認行爲
forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）
backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
both 向前和向後填充模式都被應用 */
animation-iteration-count: infinite;
/* font-style: inherit; */
animation-timing-function: linear;
animation-delay: 0.9s;
}
@keyframes move {
0% {
left: 0%;
opacity: 0;
}
70% {
left: 70%;
opacity: 0.7
}
100% {
left: 100%;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div style="width:300px;">
<div class="move">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2219285114,2237515136&fm=26&gp=0.jpg"
alt="">
</div>
</div>
</div>
</body>
</html>
原理說明：
在最外層設置一個盒子寬度，裏面使用動畫改變left的值。