Created
August 16, 2016 01:13
-
-
Save alexsul2008/b29dbe9a1e3b59ae416a4982f1bb7f9e to your computer and use it in GitHub Desktop.
Image Hover || http://codepen.io/alexsul/pen/KrEPpv
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<figure class="snip1543"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample108.jpg" alt="sample108" /> | |
<figcaption> | |
<h3>Inverness McKenzie</h3> | |
<p>The only skills I have the patience to learn are those that have no real application in life.</p> | |
</figcaption> | |
<a href="#"></a> | |
</figure> | |
<figure class="snip1543 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample100.jpg" alt="sample100" /> | |
<figcaption> | |
<h3>Alan Fresco</h3> | |
<p>The real fun of living wisely is that you get to be smug about it.</p> | |
</figcaption> | |
<a href="#"></a> | |
</figure> | |
<figure class="snip1543"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample101.jpg" alt="sample101" /> | |
<figcaption> | |
<h3>Indigo Violet</h3> | |
<p>But Calvin is no kind and loving god! He's one of the old gods! He demands sacrifice! </p> | |
</figcaption> | |
<a href="#"></a> | |
</figure> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Demo purposes only */ | |
$(".hover").mouseleave( | |
function() { | |
$(this).removeClass("hover"); | |
} | |
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); | |
@import url(https://fonts.googleapis.com/css?family=Teko:700); | |
.snip1543 { | |
background-color: #fff; | |
color: #ffffff; | |
display: inline-block; | |
font-family: 'Source Sans Pro', sans-serif; | |
font-size: 16px; | |
margin: 10px 5px; | |
max-width: 315px; | |
min-width: 230px; | |
overflow: hidden; | |
position: relative; | |
text-align: left; | |
width: 100%; | |
-webkit-transform: translateZ(0); | |
transform: translateZ(0); | |
} | |
.snip1543 *, | |
.snip1543 *:before, | |
.snip1543 *:after { | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
-webkit-transition: all 0.45s ease; | |
transition: all 0.45s ease; | |
} | |
.snip1543 img { | |
backface-visibility: hidden; | |
max-width: 100%; | |
vertical-align: top; | |
} | |
.snip1543:before, | |
.snip1543:after { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
content: ''; | |
background-color: #b81212; | |
opacity: 0.5; | |
-webkit-transition: all 0.45s ease; | |
transition: all 0.45s ease; | |
} | |
.snip1543:before { | |
-webkit-transform: skew(30deg) translateX(-80%); | |
transform: skew(30deg) translateX(-80%); | |
} | |
.snip1543:after { | |
-webkit-transform: skew(-30deg) translateX(-70%); | |
transform: skew(-30deg) translateX(-70%); | |
} | |
.snip1543 figcaption { | |
position: absolute; | |
top: 0px; | |
bottom: 0px; | |
left: 0px; | |
right: 0px; | |
z-index: 1; | |
bottom: 0; | |
padding: 25px 40% 25px 20px; | |
} | |
.snip1543 figcaption:before, | |
.snip1543 figcaption:after { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
background-color: #b81212; | |
box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); | |
content: ''; | |
opacity: 0.5; | |
z-index: -1; | |
} | |
.snip1543 figcaption:before { | |
-webkit-transform: skew(30deg) translateX(-100%); | |
transform: skew(30deg) translateX(-100%); | |
} | |
.snip1543 figcaption:after { | |
-webkit-transform: skew(-30deg) translateX(-90%); | |
transform: skew(-30deg) translateX(-90%); | |
} | |
.snip1543 h3, | |
.snip1543 p { | |
margin: 0; | |
opacity: 0; | |
letter-spacing: 1px; | |
} | |
.snip1543 h3 { | |
font-family: 'Teko', sans-serif; | |
font-size: 36px; | |
font-weight: 700; | |
line-height: 1em; | |
text-transform: uppercase; | |
} | |
.snip1543 p { | |
font-size: 0.9em; | |
} | |
.snip1543 a { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
z-index: 1; | |
} | |
.snip1543:hover h3, | |
.snip1543.hover h3, | |
.snip1543:hover p, | |
.snip1543.hover p { | |
-webkit-transform: translateY(0); | |
transform: translateY(0); | |
opacity: 0.9; | |
-webkit-transition-delay: 0.2s; | |
transition-delay: 0.2s; | |
} | |
.snip1543:hover:before, | |
.snip1543.hover:before { | |
-webkit-transform: skew(30deg) translateX(-20%); | |
transform: skew(30deg) translateX(-20%); | |
-webkit-transition-delay: 0.05s; | |
transition-delay: 0.05s; | |
} | |
.snip1543:hover:after, | |
.snip1543.hover:after { | |
-webkit-transform: skew(-30deg) translateX(-10%); | |
transform: skew(-30deg) translateX(-10%); | |
} | |
.snip1543:hover figcaption:before, | |
.snip1543.hover figcaption:before { | |
-webkit-transform: skew(30deg) translateX(-40%); | |
transform: skew(30deg) translateX(-40%); | |
-webkit-transition-delay: 0.15s; | |
transition-delay: 0.15s; | |
} | |
.snip1543:hover figcaption:after, | |
.snip1543.hover figcaption:after { | |
-webkit-transform: skew(-30deg) translateX(-30%); | |
transform: skew(-30deg) translateX(-30%); | |
-webkit-transition-delay: 0.1s; | |
transition-delay: 0.1s; | |
} | |
/* Demo purposes only */ | |
body { | |
background-color: #212121; | |
text-align: center; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment