2 divs, 1 content, 1 image, transition effect on hover, pure css, no js
A Pen by Alexander Schmidt on CodePen.
2 divs, 1 content, 1 image, transition effect on hover, pure css, no js
A Pen by Alexander Schmidt on CodePen.
<div class="widget"> | |
<div class="content"> | |
<h3>Lorem Ipsum</h3> | |
<p>dolor bla ...</p> | |
</div> | |
<div class="overlay"> | |
<img src="http://placehold.it/350x150" /> | |
<a href="#">Link</a> | |
</div> | |
</div> |
.widget { | |
cursor: pointer; | |
position: relative; | |
height: 150px; | |
width: 350px; | |
overflow: hidden; | |
} | |
.content, | |
.overlay { | |
position: absolute; | |
left: 0; | |
top: 0; | |
height: 150px; | |
width: 350px; | |
overflow: hidden; | |
padding: 0; | |
} | |
.content { | |
z-index: 1; | |
} | |
.overlay { | |
z-index: 2; | |
-webkit-transition: top .3s ease-in-out; | |
-moz-transition: top .3s ease-in-out; | |
-o-transition: top .3s ease-in-out; | |
transition: top .3s ease-in-out; | |
} | |
.widget:hover .overlay { | |
top: 150px; | |
} | |
.overlay a { | |
position: absolute; | |
left: 20px; | |
top: 120px; | |
z-index: 2; | |
} | |