html 图片悬停,CSS3 3种图片悬停时的内容滑出方式

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300&subset=latin,cyrillic-ext);

/* Vars */

body * {

box-sizing: border-box;

}

body {

background: #282828;

color: #fafafa;

font-family: "Roboto Slab", sans-serif;

}

h1 {

display: inline-block;

width: 100%;

text-align: center;

text-shadow: -1px -1px 0 #000;

text-transform: uppercase;

}

#container {

display: flex;

flex-wrap: wrap;

justify-content: center;

}

.animation-block {

width: 200px;

margin: 10px;

height: 200px;

background-color: #fff;

overflow: hidden;

position: relative;

}

.animation-block .under_bg,

.animation-block .top_inner {

width: 100%;

height: 100%;

display: block;

position: absolute;

}

.animation-block .under_bg {

background-image: url("https://upload.wikimedia.org/wikipedia/commons/1/12/Clifton_Beach_5.jpg");

background-size: cover;

background-position: center;

}

.animation-block .top_inner {

display: flex;

flex-direction: column;

flex-wrap: wrap;

align-items: center;

justify-content: center;

padding: 10px;

}

.animation-block .top_inner h3 {

font-family: sans-serif;

text-transform: uppercase;

font-size: 20;

margin: 0 0 10px 0;

}

.animation-block .top_inner button {

border: solid 1px white;

color: #fff;

background-color: transparent;

font-size: 16px;

text-transform: uppercase;

padding: 10px;

cursor: pointer;

font-weight: bold;

}

.animation-block .top_inner button:hover {

background-color: rgba(255, 255, 255, 0.9);

transition: all 500ms;

color: #3ee692;

border-color: #3ee692;

}

.animation-block.fade .top_inner {

background-color: rgba(62, 240, 146, 0.1);

opacity: 0;

}

.animation-block.fade:hover .top_inner {

opacity: 1;

background-color: rgba(62, 240, 146, 0.3);

transition: all 1000ms;

}

.animation-block.scale-in-text .top_inner {

transition: all 1000ms;

background-color: rgba(62, 240, 146, 0.1);

opacity: 0;

}

.animation-block.scale-in-text:hover .top_inner {

opacity: 1;

background-color: rgba(62, 240, 146, 0.3);

transform: scale(1.1);

}

.animation-block.scale-in-bg .under_bg {

transition: all 1000ms;

width: 101%;

}

.animation-block.scale-in-bg:hover .under_bg {

transform: scale(1.1);

}

.animation-block.slide-left .top_inner {

transition: all 1000ms;

width: 101%;

transform: translate(100%);

}

.animation-block.slide-left:hover .top_inner {

transform: translate(0);

}