Bild vergrößern bei Mouseover

[Hape]

Hier ein Code mit dem man ein Bild vergrößern kann, indem man mit der Maus darüberfährt.

Hier der CSS-Code:

Code: Alles auswählen

.image {
 transition: transform 0.7s;
}
 
.image:hover {
 transform: scale(2.5, 2.5);
}
#main {
    background-color: transparent;
    padding: 7px;
    border: 1px dashed #b9821a;
    margin: -100px 0 0 -200px;
    position:absolute;
    top: 50%;
    left: 50%;
    }

Hier der Code für die Seite:

Code: Alles auswählen

<div id="main">
<img class="image" src="xyz.jpg" width="200px" height="200px">
</div>

Hier dazu eine Testseite: http://hapes-javascript-demo-page.hpage ... eover.html