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 et left valeurs sur .thumbnail_img:hover span
sarduy:Zoom de l'image à la souris(taille réelle largeur=55,hauteur=60")
Voir mon édité question

InformationsquelleAutor Kango | 2013-01-22

css html

5

Essayez ceci:
```
.thumbnail_img img:hover
{
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
```
Si vous ne voulez pas de débordement li puis ajouter
```
.thumbnail_img li
{
    overflow: hidden;
}
```
- :Arriver zoom mais dans les <li> </li>.
- Vous pouvez essayer d'augmenter votre z-index, mais parfois le z-index ne l'aide pas beaucoup si vous voulez que votre conteneur a une moins z-index que de celui que vous voulez pour effectuer un zoom arrière. Il serait bon que vous pouvez me montrer exactement comment vous souhaitez effectuer un zoom arrière avec les fichiers source
InformationsquelleAutor Facbed

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:

<html>
<head>
<style>
body {
/* move position: relative from .thumbnail_img to body*/
position: relative;
}
.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: 250px;
left:500px;
-webkit-transform:scale(5);
-moz-transform:scale(5);
-o-transform:scale(5);
opacity: 3;
height:auto; width:auto;
border:0;
}
</style>
</head>
<body>
<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>
</body>
</html>

arriver zoom venant de l' <li>.
quel est votre " de " signifie pour vous? La position ou le pouce on devrait disparu? En passant, quelle est votre cible les navigateurs?
:zoom sur les images ci-dessus en utilisant le code css mais son bloc au sein de la Hauteur de de liste.
Je vois, alors essayez la mise à jour de l'échantillon, en haut, à gauche et à l'échelle de .thumbnail_img:hover span sont mis à jour

InformationsquelleAutor benbai123

Zoom de l'image sur la souris passe dessus !!

CSS:

.pic{
width:200px;
height:120px;
}
.zoom{
position: absolute;
width:0px;
-webkit-transition:width 0.3s linear 0s;
transition:width 0.3s linear 0s;
z-index:10;
}
.pic:hover + .zoom{
width:400px;
}

HTML:

<img class="pic" src="http://lamina17.info/image/cpp.png" alt="image">
<img class="zoom" src="http://lamina17.info/image/cpp.png" alt="image">

Voir la Démo ici Zoom De L'Image À L'Aide De Css

InformationsquelleAutor Dr.Darshan

Vous devez vous connecter pour publier un commentaire.