18041 sujets

Questions générales et questions de débutants

Effet sur toutes les images!!!

Bonsoir à tous!!
j'apprends à coder et je suis actuellement sur les figcaptions :hover maisj'ai un soucis.
je poste mon code je ne sais pas comment utiliser code pen.

le html:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<body>
<section>
<article>
<figure class="group">
<img src="img/01.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/02.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/03.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/04.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
</article>
<article>
<figure class="group">
<img src="img/05.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/06.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/07.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
<figure class="group">
<img src="img/08.jpg" alt="photo">
<figcaption>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec sed odio dui.</figcaption>
</figure>
</article>
</section>

</body>
</html>


et mon css:

body{
margin: 0;
padding: 0;
}

section{
width: 100%;
height: 600px;
}
article img{
width: 220px;
}
article{
position: relative;
width: 1200px;
height: 160px;
display: flex;
overflow: hidden;
margin-right: 5px;
margin-bottom: 5px;


}
figcaption{
position: absolute;
top: 160px;
left: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
width: 200px;
height: 100px;
text-align: justify;
font-size: 14px;
padding: 10px;
margin: 0;
transition: 2s all;
}

.group:hover figcaption{
top: 100px;
}


ma question est pourquoi les 2 premeires images fonctionnent mais quand je passe le curseur sur les autres ben l'animation ne se fait que sur les 2 premeires images.
je ne sais pas si je suis clair mais je n'arrive pas à expliquer autrement.
merci à tous
@darkcodeur : avec 27 messages à votre actifs vous devriez maintenant être capable d'utiliser une balise de code de style phpBB sur le forum...
darkodeur a écrit :
je poste mon code je ne sais pas comment utiliser code pen.

Heu... on s'inscrit (facultatif) puis on fait un copier/coller de son code comme ceci : CodePen
J'en ai profité pour corriger quelques erreurs, notamment le problème principal : ce qui devrais être attribué à l'élément parent figure.group était en fait attribué à un élément encore plus englobant (<article>). Du coup tout se faisait relativement à celui-ci.

PS : je ne vois pas trop l'intérêt ici d'un display flex étant donné qu'il vous faut une balise article par ligne, ce qui est inutile avec cette configuration. Si flexbox n'est pas paramétré correctement alors un modèle tabulaire (display:table) est largement suffisant.
Modifié par Olivier C (16 Dec 2016 - 07:27)
ah très bien merci beaucoup et désolé encore.
en fait je débute avec flexbox et je voulais les alignés sur 2 lignes c'est pour ça!!!!
merci
Sujet clos
Aller à