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 Bausteinen (Snippets) aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Tooltip per CSS anzeigen

PHP - Formulareingaben in eine Datei hinzufügen

JavaScript - Iframe alle 10 Sekunden neu laden

MySQL - Die 10 neusten Einträge einer Tabelle anzeigen