Skip to content

Instantly share code, notes, and snippets.

@andrekandore
Created July 5, 2013 10:47
Show Gist options
  • Save andrekandore/5933711 to your computer and use it in GitHub Desktop.
Save andrekandore/5933711 to your computer and use it in GitHub Desktop.
A CodePen by アンドレカンドレ.
<html>
<div class="container">
<div class='picture_container' id='picture1'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/31TmE1so1SL.jpg" alt="" />
</div>
<div class='picture_container' id='picture2'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/615bt5a8zEL.jpg" alt="" />
</div>
<div class='picture_container' id='picture3'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/41si2LNmptL.jpg" alt="" />
</div>
<div class='picture_container' id='picture4'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/31TmE1so1SL.jpg" alt="" />
</div>
<div class='picture_container' id='picture5'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/31TmE1so1SL.jpg" alt="" />
</div>
<div class='picture_container' id='picture6'>
<img class='picture' src="http://ecx.images-amazon.com/images/I/31TmE1so1SL.jpg" alt="" />
</div>
<div class='picture_container video_container' id='picture7'>
<video id="videoShowcase" width="848" height="352" poster="http://images.apple.com/html5/showcase/video/images/tron_legacy.jpg" autoplay="autoplay" autobuffer="autobuffer" loop="loop">
<source src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="/105/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="http://movies.apple.com/media/us/html5/showcase/2010/demos/apple-html5-demo-tron_legacy-us-20100601_r848-2cie.mov">
</video>
</div>
</div>
</html>
html * {
transition:.5s all ease-in-out;
}
.contents {
margin:32px;
display: box;
position:relative;
background:white;
width:320px;
height:320px;
color:green;
border:solid 3px lightgray;
border-radius:6px;
}
.contents:hover {
border-color:transparent;
}
.picture_container {
box-flex: 1.0;
float:left;
background:transparent;
width:64px;
height:64px;
margin:10px;
border:1px solid lightgrey;
border-radius:4px;
overlfow:hidden;
margin-left:4px;
margin-right:4px;
}
.video_container {
width:128px;
}
.picture_container img.picture,
.picture_container video {
position:absolute;
width:64px;
height:auto;
margin-top:auto;
margin-bottom:auto;
}
.picture_container video {
width:128px;
}
.picture_container:hover img.picture,
.picture_container:hover video,
img.picture:hover,
video:hover {
width:256px;
height:auto;
z-index:1000;
padding:8px;
left:0px;
top:0px;
background:white;
border:1px solid white;
box-shadow:0px 0px 5px black;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment