poncho
New member
Hallo Leute,
ich würde gern per CSS einen Bild-Zoom einbauen.
Ich mache das momentan so:
Das Bild hat dabei die Größe 75x75 Pixel und wird erstmal in 40x40 Pixel gestaucht. Beim "hover" wird die Beschränkung per max-width/height einfach aufgehoben und das Bild ein paar Pixel verschoben, damit es zentriert bleibt.
Das Problem ist nun, dass es auch Bilder gibt, die etwas kleiner als 75x75 sind und die weden dann nur nach links oben verschoben.
Gibt es per CSS die Möglichkeit es so zu machen, dass das Bild egal wie groß es ist immer zentriert geziegt wird beim Zoom?
ich würde gern per CSS einen Bild-Zoom einbauen.
Ich mache das momentan so:
Code:
/* Standard-Ansicht */
.plcover img {
max-width: 40px;
max-height: 40px;
margin: auto;
}
/* Zoom */
.plcover img:hover {
max-width: none;
max-height: none;
position: relative;
top: -18px;
left: -18px;
z-index: 10;
border: 1px solid #999;
}
Das Bild hat dabei die Größe 75x75 Pixel und wird erstmal in 40x40 Pixel gestaucht. Beim "hover" wird die Beschränkung per max-width/height einfach aufgehoben und das Bild ein paar Pixel verschoben, damit es zentriert bleibt.
Das Problem ist nun, dass es auch Bilder gibt, die etwas kleiner als 75x75 sind und die weden dann nur nach links oben verschoben.
Gibt es per CSS die Möglichkeit es so zu machen, dass das Bild egal wie groß es ist immer zentriert geziegt wird beim Zoom?