Bonjour,
Je débute en HTML/CSS et il y a quelque chose que je n'arrive pas à réaliser malgré la lecture de différents tutos et forums.
Sur la page d'accueil de mon site, je souhaite placer des images côte à côte (de même hauteur), avec un texte en dessous de chacune d'entre elles, aligné à gauche. Et, je souhaite que les images changent lorsqu'on passe la souris dessus.
J'utilise donc les balises <figure> et <figcaption> pour mettre un texte en légende d'une image et la propriété hover pour le changement d'image lors du survol avec le curseur.
mon code HTML :
et mon CSS:
Cependant, je n'arrive pas à mettre les images côte à côte. Je pensais qu'en faisant
figure {display : inline-block;} dans le CSS ca marcherait mais non...sinon j'ai essayé avec "float" mais toujours pareil, je n'y arrive pas...
Si vous voyez comment faire, ça m'aiderait beaucoup !! merci de m'avoir lue
Je débute en HTML/CSS et il y a quelque chose que je n'arrive pas à réaliser malgré la lecture de différents tutos et forums.
Sur la page d'accueil de mon site, je souhaite placer des images côte à côte (de même hauteur), avec un texte en dessous de chacune d'entre elles, aligné à gauche. Et, je souhaite que les images changent lorsqu'on passe la souris dessus.
J'utilise donc les balises <figure> et <figcaption> pour mettre un texte en légende d'une image et la propriété hover pour le changement d'image lors du survol avec le curseur.
mon code HTML :
<body>
<figure>
<div id="image"> </div>
<figcaption>Légende1</figcaption>
<div id="image2"> </div>
<figcaption>Légende2</figcaption>
</figure>
</body>
et mon CSS:
#image
{
height :150px;
width: 200px;
background: url(.jpg);
}
#image:hover
{
height :150px;
width: 200px;
background: url(.jpg);
}
#image2
{
height :150px;
width: 200px;
background: url(.jpg);
}
#image2:hover
{
height :150px;
width: 200px;
background: url(.jpg);
}
Cependant, je n'arrive pas à mettre les images côte à côte. Je pensais qu'en faisant
figure {display : inline-block;} dans le CSS ca marcherait mais non...sinon j'ai essayé avec "float" mais toujours pareil, je n'y arrive pas...
Si vous voyez comment faire, ça m'aiderait beaucoup !! merci de m'avoir lue