Transformer une image au rollover

Par iLikeDesign, il y a 13 ans

Les bases HTML/CSS

Bonjour à tous, je poste ici car j'ai un petit souci basique je pense mais je ne sais pas comment le regler, voila tout je voudrais que quand je passe ma souris sur une vignette celle si sois zoomer tous en gardant la meme taille, or la transformation ne fonctionne pas car j'ai mis par dessus la vignette une div avec le titre, voila mon code :

<div class="block3" style=" width: 189px;height: 189px;">
        <a href="#">
        <span class="hide"><h1>Titre</h1><br /><h2>Motion</h2></span>
        <div class="thumbcontainer">
        <img src="img/thumb-1.jpg" class="thumb"/></div></a></div>

CSS : 

.hide{opacity:0;
      height:189px;
      overflow:hidden;
      position:absolute;
      width:189px;
      z-index:5;
      background-color:rgba(0,0,0,.30);
      -webkit-transition:all 0.4s ease;}
.hide:hover{opacity:1;
}        
.thumb{
    height:199px;
    width:199px;
    margin-left:-5px;
    margin-top:-5px;
}
.thumbcontainer{
        height:189px;
        width:189px;
        overflow:hidden;
        display:block;
        z-index:2;}

.thumb:hover{
        -webkit-transform:scale(1.1);   
}

Merci de bien vouloir m'aider :)

4 réponses

Nairolf, il y a 13 ans

Je vois pas trop ce que tu veux dire par zoomer en gardant sa taille, car une image pour la "zoomer" tu dois agrandir sa taille, impossible d'agrandir une partie seulement, à part si tu la met dans une div qui fait la même taille que l'image avec l'image centrée dedans, un overflow: hidden. Donc là quand tu feras un :hover tu pourras "zoomer" ton image en agrandissant ses dimensions.

iLikeDesign, il y a 13 ans

Oui comme tu me dis ca marche, mais enfaite moi quand je passe ma souris sur l'image il y a une div par dessus qui apparait avec un texte, or si je le laisse cette div le zoom ne ce fait pas..

Nairolf, il y a 13 ans

Je comprend pas trop là

Lotfi Berrahal, il y a 13 ans

C'est normal que ça ne marche pas car une fois que ton texte apparait il est en z-index : 5 du coup il est devant tout le reste et tu annule en même temps le hover sur thumb !
Il faudrait que tu précise l'effet désiré en entier !
Quand tu passe au hover de ce que j'ai compris tu as le texte qui apparaît et l'image qui s'agrandit.
Essaye ça si j'ai bien compris !

.block3 .hide{opacity:0;
      height:189px;
      overflow:hidden;
      position:absolute;
      width:189px;
      z-index:5;
      background-color:rgba(0,0,0,.30);
      -webkit-transition:all 0.4s ease;
      transition:all 0.4s ease;
}

.block3:hover .hide{
opacity:1;
}        
.block3 .thumb{
    height:199px;
    width:199px;
    margin-left:-5px;
    margin-top:-5px;
    -webkit-transition:all 0.4s ease;
    transition:all 0.4s ease;
}
.block3:hover .thumb{
-webkit-transform:scale(1.1);
transform:scale(1.1);
}

.thumbcontainer{
        height:189px;
        width:189px;
        overflow:hidden;
        display:block;
        z-index:2;}