Skip to content

Instantly share code, notes, and snippets.

@nealnote

nealnote/css3-transition-box-shadow.html

Created June 4, 2014 06:08
Show Gist options
  • Save nealnote/980a995fd761156ce109 to your computer and use it in GitHub Desktop.
Save nealnote/980a995fd761156ce109 to your computer and use it in GitHub Desktop.
Download ZIP
css3-transition-box-shadow.html
Raw
css3-transition-box-shadow.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8'>
<title>css3-transition-box-shadow</title>
<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.1/normalize.css">
<style type="text/css">
.list {
margin-top: 60px;
border-left: 1px solid #E8E8E8;
border-top: 1px solid #E8E8E8;
}
.item {
position: relative;
float: left;
width: 33.3%;
height: 288px;
border-right: 1px solid #E8E8E8;
border-bottom: 1px solid #E8E8E8;
overflow: hidden;
transition: box-shadow .3s;
}
.item:hover {
box-shadow:0 0 8px 5px #e7e7e7;
}
.item-last {
float: none;
overflow: hidden;
width: auto;
}
</style>
</head>
<body>
<div class="list">
<div class="item"></div>
<div class="item"></div>
<div class="item item-last"></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment