Ampliar a imagem com o css

Question

Ampliar a imagem com o css

Estou a tentar ampliar a imagem da mouseover.

estou a obter o efeito de zoom, mas a imagem deve fazer zoom dentro dessa marca de " lista "e não fora dessa"lista".
O que devo fazer para obter o efeito zoom como aparecer.

Editar : aplicei o css na lista para torná-lo horizontal como:

image1 image2 image3 ..... em ul e li tag.

Tentei seguir o código.

<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;
}

6

html css

Author: Uttara, 2013-01-22

Source

3 answers

score 5 · Answer 1

Tenta isto:

.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);
}

Se não queres transbordar li, então adiciona

.thumbnail_img li
{
    overflow: hidden;
}

score 3 · Answer 2

A ampliação da imagem está dentro dessa lista desde que você atribui relativo.thumbnail_img (que está dentro da lista) e isto torna-se a âncora da imagem posicionada absoluta, ajustei ligeiramente o seu estilo como em baixo para fazer a ampliação da imagem estar fora da lista:

<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>

score 1 · Answer 3

ampliar a imagem na passagem do rato !!

.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;

}

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

Veja a demonstração aqui ampliar a imagem usando o Css