Bonjour/bonsoir à tous !
Il y a quelques temps je suis tombée sur un site d'histoire de l'art qui utilise des images réagissant au rollover pour présenter les liens vers ses articles. Au passage de la souris, l'image "s'agrandit" à partir du centre dans les quatre directions sans décaler les div adjacentes.
Par curiosité, j'ai essayé de reproduire cet effet avec de simples images, en vain... !
Je vous mets un lien vers la page avec l'effet en question pour montrer ce que je veux dire : http://arthistoryproject.com/artists/
En observant le comportement de la div au survol de la souris, ce n'est en fait pas l'"image" qui s'agrandit, mais plutôt la div qui la contient et qui révèle les parties masquées (avec un overflow: hidden ?). Cette div semble en contenir deux qui occupent chacune 50% de la hauteur : une avec l'image et l'autre avec du texte.
J'ai depuis perdu le code que j'avais écrit pour m'exercer, mais dans l'idée j'avais essayé de reproduire l'effet ainsi :
CSS :
De cette manière, je voulais faire en sorte que ce ne soit pas l'image qui soit zoommée ou qui s'agrandisse, mais que ce soit uniquement son parent (le box_container en overflow: hidden) qui s'agrandisse et révèle les parties cachées de l'image (donc celles qui dépassent les dimensions de son parent box_container).
Malheureusement, cette méthode ne fait qu'agrandir l'image avec son contenant, au lieu du contenant tout seul. J'ai essayé de bidouiller avec les "position:relative" et "absolute" pour empêcher l'image de s'agrandir, mais jusque-là ça n'a rien donné. Bref, je sèche complètement
Si quelqu'un a une idée pour reproduire cet effet, je suis très preneuse. Merci pour votre aide et bonne journée
Il y a quelques temps je suis tombée sur un site d'histoire de l'art qui utilise des images réagissant au rollover pour présenter les liens vers ses articles. Au passage de la souris, l'image "s'agrandit" à partir du centre dans les quatre directions sans décaler les div adjacentes.
Par curiosité, j'ai essayé de reproduire cet effet avec de simples images, en vain... !
Je vous mets un lien vers la page avec l'effet en question pour montrer ce que je veux dire : http://arthistoryproject.com/artists/
En observant le comportement de la div au survol de la souris, ce n'est en fait pas l'"image" qui s'agrandit, mais plutôt la div qui la contient et qui révèle les parties masquées (avec un overflow: hidden ?). Cette div semble en contenir deux qui occupent chacune 50% de la hauteur : une avec l'image et l'autre avec du texte.
J'ai depuis perdu le code que j'avais écrit pour m'exercer, mais dans l'idée j'avais essayé de reproduire l'effet ainsi :
<div id="box_container">
<div id="image"><img src="image1.png"></div>
<div id="texte"><h1>blabla titre</h1><p>blabla paragraphe</p></div>
</div>
CSS :
#box_container {
width: 300px;
height: 400px;
overflow: hidden;
}
#image {
width: 350px;
height: 450px;
}
#box_container:hover {
transform: scale(1.1);
-webkit-transform: scale(1.1);
transition: 500ms;
-webkit-transition: 500ms;
}
De cette manière, je voulais faire en sorte que ce ne soit pas l'image qui soit zoommée ou qui s'agrandisse, mais que ce soit uniquement son parent (le box_container en overflow: hidden) qui s'agrandisse et révèle les parties cachées de l'image (donc celles qui dépassent les dimensions de son parent box_container).
Malheureusement, cette méthode ne fait qu'agrandir l'image avec son contenant, au lieu du contenant tout seul. J'ai essayé de bidouiller avec les "position:relative" et "absolute" pour empêcher l'image de s'agrandir, mais jusque-là ça n'a rien donné. Bref, je sèche complètement
Si quelqu'un a une idée pour reproduire cet effet, je suis très preneuse. Merci pour votre aide et bonne journée
