CSS hover effect
A Pen by Joao Nascimento on CodePen.
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'> | |
<div class="row"> | |
<ul class="items"> | |
<li> | |
<a href="#"> | |
<figure> | |
<img src="http://d13yacurqjgara.cloudfront.net/users/338979/screenshots/1448595/arctic_express.png"/> | |
<h1 class="title">Lorem ipsum</h1> | |
<div class="description"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus tristique nibh quis commodo. Pellentesque fringilla purus ut nulla imperdiet.</p> <!-- / description --> | |
</div> | |
</figure> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<figure> | |
<img src="http://d13yacurqjgara.cloudfront.net/users/108457/screenshots/1448307/icon.png"/> | |
<h1 class="title">Lorem ipsum</h1> | |
<div class="description"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus tristique nibh quis commodo. Pellentesque fringilla purus ut nulla imperdiet.</p> <!-- / description --> | |
</div> | |
</figure> | |
</a> | |
</li> | |
<li> | |
<a href="#"> | |
<figure> | |
<img src="http://d13yacurqjgara.cloudfront.net/users/133715/screenshots/1448155/wagon2.png"/> | |
<h1 class="title">Lorem ipsum</h1> | |
<div class="description"> | |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce cursus tristique nibh quis commodo. Pellentesque fringilla purus ut nulla imperdiet.</p> <!-- / description --> | |
</div> | |
</figure> | |
</a> | |
</li> | |
</ul> | |
</div> |
CSS hover effect
A Pen by Joao Nascimento on CodePen.
@import "compass"; | |
body { | |
font-family: 'Lato', sans-serif; | |
font-weight: 300; | |
background-color: #f5f5f5; | |
} | |
$color: #87d3b7; | |
.row { | |
width: 1024px; | |
margin: 30px auto; | |
} | |
/* Mighty Hover | |
* -------------------------- */ | |
ul.items { | |
width: 100%; | |
display: table; | |
li { | |
float: left; | |
width: 31.33%; | |
text-align: center; | |
margin-right: 3%; | |
display: block; | |
figure { | |
position: relative; | |
overflow: hidden; | |
background: $color; | |
text-align: center; | |
border-bottom: 2px solid $color; | |
width: 100%; | |
img { | |
width: 100%; | |
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s; | |
transition: transform 0.3s ease-out, opacity 0.3s; | |
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s; | |
-ms-transition: -ms-transform 0.3s ease-out, opacity 0.3s; | |
} | |
} // figure | |
a { | |
display: block; | |
width: 100%; | |
height: 100%; | |
&:hover .description { | |
-webkit-transform: translate(0, 0); | |
-moz-transform: translate(0, 0); | |
transform: translate(0, 0); | |
} | |
&:hover .title { | |
-webkit-transform: translate(0, -73px); | |
-moz-transform: translate(0, -73px); | |
transform: translate(0, -73px); | |
} | |
&:hover img { | |
opacity: 0.3; | |
-webkit-transform: translate(0, -30px); | |
-moz-transform: translate(0, -30px); | |
transform: translate(0, -30px); | |
} | |
} // a | |
&:last-of-type { | |
margin-right: 0px; | |
} | |
} | |
} | |
h1.title { | |
display: table-cell; | |
width: 100%; | |
font-family: 'Lato', sans-serif; | |
font-weight: 700; | |
font-size: 20px; | |
color: $color; | |
line-height: 2.7; | |
text-align: center; | |
text-transform: uppercase; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 3; | |
background: #ffffff; | |
padding: 0 10px; | |
display: block; | |
-webkit-transition: -webkit-transform 0.4s, color 0.3s; | |
-moz-transition: -moz-transform 0.4s, color 0.3s; | |
transition: transform 0.4s, color 0.3s; | |
border-top: 2px solid $color; | |
&:after { | |
content: ''; | |
position: absolute; | |
top: 100%; | |
left: 0; | |
right: 0; | |
height: 100px; | |
background: #ffffff; | |
width: 100%; | |
} | |
} // title | |
.description { | |
display: table-cell; | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
width: 100%; | |
-webkit-transform: translate(0, 100%); | |
-moz-transform: translate(0, 100%); | |
transform: translate(0, 100%); | |
z-index: 4; | |
-webkit-transition: -webkit-transform 0.25s; | |
-moz-transition: -moz-transform 0.25s; | |
transition: transform 0.25s; | |
p { | |
display: block; | |
height: 80px; | |
overflow: hidden; | |
color: #a8a8a8; | |
margin: 0; | |
font-family: 'Lato', sans-serif; | |
font-weight: 300; | |
font-size: 15px; | |
line-height: 1.3; | |
padding: 0 7px; | |
} | |
} // description |