Skip to content

Instantly share code, notes, and snippets.

@andrekandore

andrekandore/index.html

Created July 5, 2013 10:47
Download ZIP

Revisions

  1. アンドレカンドレ created this gist Jul 5, 2013.
    29 changes: 29 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    <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>
    65 changes: 65 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,65 @@
    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;
    }