description for thumbnail

Show description on thumbnail on mouse over

by stofke

HTML

<!DOCTYPE html>
<html>

<head>
<title>Freebie #2 by www.launchedpixels.com</title>
<meta charset="UTF-8" />

<!-- CSS Layout -->
<link rel="stylesheet" href="style.css" />
</head>

<body>
<!-- box1 -->
<div class="box1">
    <h3>Animated thumbnail</h3>
    <img src="http://placehold.it/200x150" alt="It's an image" title="" />
</div>
<!-- /box1 -->

<!-- box2 -->
<div class="box2">
    <p>That's a description. And I like this CSS3 animation!</p>
</div>
<!-- /box2 -->
</body>

</html>

CSS

/***************
* 0. Reset CSS *
****************/ /* Light reset css */

body,div,h3,p,img{margin:0; padding:0;}
h3{font-weight:normal;}
img{border:none;}


/**********
* 1. Body *
***********/

/*
** Body *******************************/
html{font-size:100%;}
body{font-family:Helvetica, Arial, sans-serif; color:#000000; background:#f9f9f9;}


/***************
* 2. Functions *
****************/

div.clear{clear:both;}


/***********
* 3. Boxes *
************/

/*
** Box 1 ****************************/
div.box1{
    margin:30px 0 0 30px;
    padding:15px 20px;
    height:;
    width:200px;
    background:#ffffff;
    border:1px solid #e7e7e7;    
    postion:relative;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    }

div.box1 h3{
    font-size:16px;
    color:#909090;
    }

div.box1 img{
    margin-top:10px;
    height:150px;
    width:200px;
    }

/*
** Box 2 ****************************/
div.box2{
    margin:-129px 0 0 30px;
    padding:15px 20px;
    height:100px;
    width:200px;
    background:#ffffff;
    border:1px solid #e7e7e7;
    position:absolute;
    z-index:-1;

    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    
    -webkit-transition:margin 1s ease;
    -moz-transition:margin 1s ease;
    -o-transition:margin 1s ease;
    transition:margin 1s ease;
    }

div.box2 p{
    margin:70px 0 0 0;
    font-size:12px;
    color:#bebebe;
    }
    
div.box1:hover + div.box2, div.box2:hover{
    margin:-70px 0 0 30px;
    }