Présentation tutoriaux grafikart CSS3

Bonjour,

Voici un petit tutorial qui montre comment realiser l'effet sur les images dans la partie tutorial de grafikart.

Video

HTML:

<article>
    <div class="tutorial">
        <div class="white"><img src="http://www.grafikart.fr/css/img/zoom.png"/></div>
        <img src="http://www.grafikart.fr/img/tutos/thumbs/288_205x100.jpg"/>
    </div>
</article>

CSS3

body{
    background-color:#CCCCCC;   
}
.tutorial{
    position:relative;
    display:inline-block;
    border:4px solid #FFF;
    border-radius:5px;  
    width:205px;
    height:100px;
    z-index:0;
    cursor:pointer;
}
.tutorial .white{
    background-color:rgba(255,255,255,0.5); 
    position:absolute;
    width:205px;
    height:100px;
    z-index:10;
    opacity:0;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -o-transition:all 0.5s;
}
.tutorial:hover .white{
    opacity:1;
}
.white img{
    position:absolute;
    left:45%;   
    top:40%;
    opacity:0.5;
}
.tutorial:before{
    content:url(http://www.grafikart.fr/img/apps/13.png);
    position:absolute;
    bottom:0;
    left:0;
    width:32px;
    height:32px;    
    background-color:#FFFFFF;
    border-radius:0 5px 0 0;
    z-index:20;
}
.tutorial:after{
    content:"10 Min";
    position:absolute;
    bottom:0;
    right:0;
    width:50px;
    height:32px;    
    background-color:#FFFFFF;
    border-radius:5px 0 0 0;
    color:#CCCCCC;
    z-index:20;
}

Si vous avez des questions n’hésitez pas