css 产生huck,CSS3 悬停时出现图像标题

CSS

语言：

CSSSCSS

确定

@import "https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Pacifico";

*,

*:after,

*:before {

box-sizing: border-box;

}

.text--center {

text-align: center;

}

h1 {

font-size: 3em;

}

h2 {

font-size: 2em;

font-style: italic;

}

html {

display: flex;

align-items: center;

justify-content: center;

}

body {

height: 100%;

user-select: none;

font-family: 'Open Sans Condensed', sans-serif;

}

.wrapper {

width: 400px;

overflow: hidden;

margin: 0 auto;

box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);

}

.caption {

position: relative;

-webkit-backface-visibility: hidden;

}

.caption img {

max-width: 100%;

height: auto;

display: block;

transition: opacity .2s ease-in-out;

}

.caption img:hover {

opacity: .5;

}

.caption::after,

.caption::before {

position: absolute;

width: 100%;

height: 50%;

color: #fff;

z-index: 1;

transition: all 300ms ease;

}

.caption::before {

content: attr(data-title);

background: rgba(0, 0, 0, 0.5);

font-size: 4em;

font-family: 'Pacifico', sans-serif;

text-align: center;

padding-top: 13%;

transform: translateY(-100%) scale(0.8);

}

.caption::after {

content: attr(data-description) " ...";

background: rgba(204, 204, 204, 0.7);

top: 50%;

padding: 20px;

font-size: 1.4em;

transform: translateY(100%) scale(0.8);

color: #000;

}

.caption:hover::before,

.caption:hover::after {

transform: translateY(0%) scale(1);

}