CSS - Bild vergrößern mit dem „Checkbox Hack”


<style>

input[type="checkbox"].zoom {
 
displayNone;
}

input[type="checkbox"].zoom img {
 
borderSolid 1px #000000;
 
cursorPointer;
 
transitiontransform 0.7s;
 
max-width100%;
 
heightAuto;
}

input[type="checkbox"].zoom:checked img {
  
transformscale(1.51.5);
}
</
style>

<
label>
 <
input type="checkbox" class="zoom">
 <
img src="bild.png"><br>
Klicke zum vergrößern</label>

Füge cursor: zoom-in und cursor: zoom-out ein um das Lupen-Symbol anzuzeigen.

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<progress> Fortschrittsanzeige

CSS - Button Glas-Effekte

PHP - Zufallsgenerator (Lottozahlen)

JavaScript - Datum und Uhrzeit als Zeichenkette anzeigen

MySQL - Das Alter von Personen ermitteln

Mal was Neues!
Möchten Sie Besucher haben die öfters als einmal auf Ihre Homepage vorbeischauen? Bieten Sie neue Seiten an. Vor allem die Startseite sollte auf neue Seiten, Bilder, News oder Funktionen hinweisen. Damit ist klar, dass Ihre Homepage immer wieder aktualisiert wird und nicht dahinvegetiert. Somit machen Sie automatisch Ihre Besucher zu "Stammkunden".