<div class="effect-wrap">
<figure class="effect5">
<img src="https://tistory4.daumcdn.net/tistory/2141493/skin/images/simg06.png" alt="">
<figcaption>
<h3>Mouse Hover<em>Effect</em></h3>
</figcaption>
</figure>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,700,900');
body {
font-family: 'Roboto', sans-serif;
background-color: #212121;
}
.effect-wrap {
width: 100vw; height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.effect5 {
position: relative;
width: 400px; height: 300px;
background: #000;
overflow: hidden;
border: 7px solid #111;
box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
}
.effect5 img {
width: 100%;
filter: sepia(20%) saturate(60%);
}
.effect5 figcaption {
position: absolute;
top: 0; right:0; bottom: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
z-index: 1;
text-align: center;
line-height: 1.7em;
color: #fff;
text-transform: uppercase;
font-size: 20px;
opacity:0;
transition: all 0.3s ease;
}
.effect5 figcaption h3 {
font-size: 1.3em;
letter-spacing: 2px;
font-weight: 100;
}
.effect5 figcaption em {
display: block;
font-weight: bold;
letter-spacing: 1px;
font-weight: 700;
}
.effect5:before,
.effect5:after {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(0,0,0,0.3);
border-top: 70px solid rgba(0,0,0,0.4);
border-bottom: 70px solid rgba(0,0,0,0.4);
transition: all 0.3s ease;
z-index: 1;
opacity:0;
}
.effect5:before {
transform: scaley(2);
}
.effect5:after {
transform: scaley(2);
}
.effect5:hover:before,
.effect5:hover:after {
opacity:1;
transform: scale(1);
}
.effect5:hover > img {
opacity:0.7;
}
.effect5:hover figcaption {
opacity:1;
transition-delay: 0.1s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.