Zoom mit CSS

Hier mal eine Möglichkeit mit CSS einen Zoom-Effekt zu realisieren

CSS-Anweisung

.bilder_zoom{
position: relative;    /* weggelassen bei Browserprobleme */
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{ /*Abstand zum evtl. Text setzen*/
border-width: 0;
padding: 2px;
}
.bilder_zoom:hover span{
visibility: visible; position: fixed; display: block;
 top: 15em;  /* Ausrichtung des gezoomten Bildes  */
left: 25em; /* Ausrichtung horizontal */   }

#zoom{display: block; position: absolute; width: 100px; margin-right: 1em;
     top: 13em;  /*   Ausrichtung Vorschaubild */
 }
#textfeld{
  width: 80%;  margin-left: 150px;   margin-right: 3em;
}

Html

<div id="textfeld">
<p>Text</p>
</div>
<div id="zoom">
<ul>
  <li>
    <a class="bilder_zoom">
    <img style="width: 100px; height: 67px;" src="img/nepal1.jpg" alt="kind" />
    <span><img src="img/nepal1.jpg" width="500" height="334" alt="kind" /></span></a>
   </li>
 </ul>
  </div>

Zoomeffekt mit JavaScript

Fragen beantwortet & Tipps zum Webdesign

Wichtig !!

Die Serversoftware Mowes Portable von der Firma CH Software hat die Geschäftstätigkeit zum 7. November 2012 eingestellt.
Ein gleichwertiges Programm ist: EasyPhp