Skip to content

Instantly share code, notes, and snippets.

/jsbin.bemikuki.css

Created July 15, 2014 07:28
Show Gist options
  • Save anonymous/e055530ac6cc1986217a to your computer and use it in GitHub Desktop.
Save anonymous/e055530ac6cc1986217a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.bemikuki.css
body{
font-family: 'Raleway', Arial, sans-serif;
}
.box{
width:600px;
height:380px;
opacity:0.5;
background:url('http://tympanus.net/Development/HoverEffectIdeas/img/1.jpg') -40px 0px;
-webkit-transition:background-position 0.5s ease-out,opacity 0.5s linear;
}
.box:hover{
background-position:0px 0px;
opacity:1;
}
.bold{
font-weight:900;
}
.h2{
position:relative;
top:50%;
left:10%;
font-size:38px;
font-weight:lighter;
-webkit-transform:translate3d(0,40px,0);
-webkit-transition:-webkit-transform 0.5s linear;
}
.box:hover .h2{
-webkit-transform:translate3d(0,0px,0);
}
.white-text{
color:#FFF;
}
.box .disc{
position:relative;
top:40%;
left:10%;
font-size:24px;
font-weight:lighter;
opacity:0;
-webkit-transition:opacity 0.5s linear,-webkit-transform 0.5s linear;
-webkit-transform:translate3d(0,40px,0);
}
.box:hover .disc{
opacity:1;
-webkit-transform:translate3d(0,0px,0);
}
Raw
jsbin.bemikuki.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<p class="h2 white-text">NICE<span class="bold">LILLY</span></p>
<p class="white-text disc">Lily likes to play with crayons and pencils</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment