Bonjour,
Voici un petit tutorial qui montre comment realiser l'effet sur les images dans la partie tutorial de grafikart.
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
Bonsoir,
Je ne sais pas si on a le droit de réagir.
Je trouve ton tuto plutôt pas mal je dois dire et l'effet sympa.
Le seul bémol serait sur la vidéo... On ne voit pas le code, du coup il est impossible de suivre réellement.
Et la musique de fond peut être plus sobre ou alors entendre mieux ta voix ! :)
Enfin, ce n'est que mon avis. ;)
Merci en tout cas,
Bonne soirée.
bonsoir,
Pour la musique je suis d'accord, je n'aurai pas du la mettre.
Apres j'etais sur mon pc portable donc j'ai utiliser le micro integrer qui n'est pas top...
Pour la qualité as tu essayer de la mettre en hd?
merci de ta reaction
bonne soiree
Bonjour,
Mes excuses pour la vidéo !
On voit très bien, j'ai oublier de le mettre en plein écran ! =$
Navré ! =S
Cependant, tout est bien je dirais !
Plutôt bien expliquer, juste la musique comme j'ai dit précédemment !
Merci du partage ! :)