Peter: Bei Click oder mouseover auf kleinem Bild Vergrößerung anzeigen.

Beitrag lesen

Hallo Henry, ich habe jetzt aus Beispielen ohne Javascript etwas zusammengebaut, das fast funktioniert. Was ich nicht geschafft habe, ist das große Bild im Fenster horizontal und vertikal auszurichten. Hat jemand eine Idee, wo ich ändern muss, dass die Ausrichtung klapp? Hier der Quelltext:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />

<style>

.bilder_zoom{position: relative;  z-index: 0;
}

.bilder_zoom:hover{background-color: transparent;z-index: 50;
}

.bilder_zoom span{position: absolute; float: left;visibility: hidden;color: black;
text-decoration: none;}

.bilder_zoom span img{border-width: 0;padding: 2px;}

.bilder_zoom:hover span{visibility: visible; position: fixed; display: block;
position: absolute;top: 50%;left: 50%;margin-left: -400px;margin-top: -300px;}

</style>

</head>

<body>

<div>

<a class="bilder_zoom">
<img style="width: 100px; height: 67px;" src="img/bild_klein.jpg" alt="Muster-klein" />

<span><img src="img/bild_gross.jpg" style="width: 800px; height: 600px;" alt="Muster-groß" /></span>
</a>

</div>

</body>
</html>