Zoom de l'image à l'aide de css
Je suis en train de zoom de l'image à la souris.
J'obtiens l'effet de zoom, mais l'image doit zoom à l'intérieur de cette "liste" de la balise de ne pas sortir de cette "liste".
Que dois-je faire pour obtenir l'effet de zoom, comme la pop up.
Modifier: j'ai appliqué css à la liste pour faire l'horizontale comme:
image1 image2 image3 .....
en ul et li tag.
J'ai essayé le code suivant.
<div class="mytest" id="slideshow-carousel" style="padding-top:12px;padding-left: 33px;">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li>
<a href="#" rel="p1" class="thumbnail_img"> <img src="image.jpg " width="55" height="60" alt="#"/>
<span><img src="image.jpg" style="height:100px; width:100px" /></span>
</a>
</li>
<li>
<a href="#" rel="p1" class="thumbnail_img"> <img src=" " width="55" height="60" alt="#"/>
<span><img src="" style="height:100px; width:100px" /></span>
</a>
</li>
</ul>
</div>
Css:
.thumbnail_img {
position: relative;
z-index: 0;
/*right:420px;*/
}
.thumbnail_img:hover {
background-color: transparent;
z-index: 100;
}
.thumbnail_img span img {
display: inline-block;
margin:-13px 17px 2px -13px;
}
.thumbnail_img span {
position: absolute;
visibility: hidden;
color: black;
text-decoration: none;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
}
.thumbnail_img:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
background: transparent;
top: 0px;
left:5px;
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
opacity: 3;
height:auto; width:auto;
border:0;
}
- Pouvez-vous donner plus d'info? N'est pas clair ce que vous essayez d'atteindre
- Modifier la
top
etleft
valeurs sur.thumbnail_img:hover span
- sarduy:Zoom de l'image à la souris(taille réelle largeur=55,hauteur=60")
- Voir mon édité question
Vous devez vous connecter pour publier un commentaire.
Essayez ceci:
Si vous ne voulez pas de débordement li puis ajouter
Le zoom sur les images de l'intérieur de cette liste puisque vous assigner par rapport à .thumbnail_img (qui, au sein de la liste) et de ce fait, il devient le point d'ancrage de l'absolu placé l'image, j'ai légèrement ajuster votre style en tant que ci-dessous pour faire le zoom sur les images de l'extérieur de la liste:
CSS:
HTML:
Voir la Démo ici Zoom De L'Image À L'Aide De Css