Guida Come fare l'effetto che all'hover un immagine ingrandisce

ZarkMan · 28 Settembre 2015

In questa guida vi spiegherò con HTML&CSS come fare l'effetto che all'hover l'immagine ingrandisce.
Per prima cosa scriviamo la struttura di HTML con l'immagine:

HTML:

<html>
<head>
<title>Titolo</title>
<meta charset="utf-8">
</head>
<body>
<img src="link img" class="classe">
</body>
</html>

Ora nei CSS (nel tag head attraverso foglio di stile o attraverso style) inseriamo:

HTML:

img.classe
{
width:auto;
}
img.classe:hover
{
width:XXpx;
height:XXpx;
}

Ora, a posto di width: XXpx mettiamo un numero di px superiore all'immagine e uguale per height.
Spero che la guida vi sia stata utile, alla prossima

TheSeeker · 28 Settembre 2015

Chiunque con un minimo di conoscenza di CSS sa questo

Ti lascio comunque un like per l'impegno

ZarkMan · 28 Settembre 2015

Si lo so, infatti è una guida per principianti

zipippino · 2 Ottobre 2015

puoi anche direttamente fare al posto di width e height , scrivi size:XXX% in percentuale è più facile tutto

</Maz> · 24 Marzo 2017

Preferisco sfruttare la proprietà transform di CSS3

HTML

HTML:

<!DOCTYPE html>
<html lang="it">

    <head>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <img src="http://pm1.narvii.com/5851/8c77490401936349e1efa892849726eb70824108_hq.jpg" alt = "Hikigaya" />
        <h3> Passa il mouse su questo esemplare di Hikigaya per zoomare </h3>
    </body>

</html>

CSS

HTML:

img
{
    width: 350px;
    height: 300px;
    display: block;
    margin: 150px auto;
    transition: all, 1s, ease-in-out;
}

img:hover
{
    -webkit-transform: scale(1.1, 1.1);
        -o-transform: scale(1.1, 1.1);
        -moz-transform: scale(1.1, 1.1);
        -ms-transform: scale(1.1, 1.1);

    box-shadow: 10px 10px 50px #000;
}

h3 
{
    text-align: center;
    margin: 0;
    padding: 0;
    font-family: arial;
}

Cerca

Guida Come fare l'effetto che all'hover un immagine ingrandisce

ZarkMan

TheSeeker

ZarkMan

zipippino

</Maz>

DISCUSSIONI SIMILI