Bild vergrößern

[Hape]

Man kann ein Bild auch vergrößern wenn man mit dem Mauszeiger in das Bild geht und es verkleinern wenn man mit der Maus wieder aus dem Bild herausgeht:

Code: Alles auswählen

<style>
.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%;
    }
</style>
<div id="main">
<img class="image" src="Url zum BIld" width="200px" height="200px">
</div>

Hier eine Demo für Mouseover: https://hapes-javascript-demo-page.hpag ... eover.html

Noch ein weiteres Beispiel mit onmouseover und onmouseout:

Code: Alles auswählen

<img src="Url zum Bild" height="100" width="100"onmouseover="this.src='Url zum Bild';this.height=300;
this.width=400"onmouseout="this.src='Url zum Bild';this.height=150;this.width=200">
 

Hier eine Demoseite dazu: https://hapes-javascript-demo-page.hpag ... eover.html