Skip to content

Instantly share code, notes, and snippets.

@arvindang

arvindang/jsbin.saduz.css

Created April 29, 2014 00:09
Show Gist options
  • Save arvindang/11387610 to your computer and use it in GitHub Desktop.
Save arvindang/11387610 to your computer and use it in GitHub Desktop.
Download ZIP
Card hover and reveal on click.
Raw
jsbin.saduz.css
body {
padding-top: 40px;
}
div {
height: 250px;
overflow: hidden;
width: 370px;
transition: all .2s ease-in;
margin: 0 auto;
-webkit-box-shadow: 0 8px 6px -6px #444;
-moz-box-shadow: 0 8px 6px -6px #444;
box-shadow: 0 8px 6px -8px #444;
}
/* div:hover {
content:"";
background: url(http://www.clker.com/cliparts/F/Q/M/s/Q/k/sun-rays-md.png) no-repeat top center;
} */
.shadow-increase {
box-shadow: 0 9px 4px -6px #444;
}
.web-clip {
display: block;
width: 350px;
margin: 0 auto;
margin-top: 60px;
transition: all .2s ease-in;
border-radius: 8px;
}
.hover-state:hover {
margin-top: 40px;
}
.test {
height: 100%;
}
Raw
jsbin.saduz.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<img src="http://placehold.it/350x850" alt="" class="web-clip hover-state">
</div>
</body>
</html>
Raw
jsbin.saduz.js
$(".web-clip").on("click", function() {
$("div").toggleClass("test");
$(".web-clip").toggleClass("hover-state");
});
$(".web-clip").hover(function() {
$("div").toggleClass("shadow-increase");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment