Add captions to an image on hover mouse with CSS3 in blogger

Facebook in blogger Add button in facebook blogger

To add a caption to an image with css3 at hover the mouse in blogger , I recommend you follow this tutorial , if this effect does not work for you, know that your browser does not css3 media. 




This stuff works on Mozilla Firefox, Chrome, Safari and Opera. and the implementer in your blog, follow these steps:

    Login to blogger , go to Presentation >> Edit HTML and look for the following snippet:
    ]] > </ b: skin >


Paste the following code just before the code precedent:

# afterimage {
}
{ #figure
position: relative;
float: left;
margin: 10px ;
overflow: hidden ;
padding: 1px ;
}
#figure : hover {
-moz-box- shadow: 0 0 20px RGBA ( 0,0,0,0.75 )
-webkit- box-shadow : 0 0 20px RGBA ( 0,0,0,0.75 )
box-shadow : 0 0 20px RGBA ( 0,0,0,0.75 )
}
#figure .Caption {
position: absolute;
bottom: 0;
left: 0;
opacity: 0.75 ;
margin-bottom : -115px ;
-webkit- transition : margin-bottom ;
-webkit- transition -duration : 400 ms ;
-webkit- transition - timing-function : ease-out ;
-moz- transition -property : margin-bottom ;
-moz- transition -duration : 400 ms ;
-moz- transition - timing-function : ease-out ;
-o - transition -property : margin-bottom ;
-o - transition -duration : 400 ms ;
Transition: margin-bottom ;
transition -duration : 400 ms ;
transition - timing-function : ease-out ;
}
#figure : hover { .Caption
margin-bottom : 0px;

}
    #post-image .caption {
    width:100%;
    height:90px;
    padding:10px;
    background:#111;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
    }
    #post-image .caption b {
    text-shadow: 0px 2px 0px #000;
    }
    #post-image .caption {
    color: #ddd;
    line-height: 24px;
    font-size: 14px;
    text-shadow: 0px 2px 0px #000;
    }
    Enregistrer votre modèle blogger.

Implémentation dans les messages blogger
Coller le code suivant dans un nouveau message blogger et changer

<div id="post-image">
<div id='figure'>
<img src="url de votre image"/>
<span class='caption'>
<b>Titre de votre image/b>La description de vottre image
</span>
</div>
</div>