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.

<meta> Meta-Angaben

CSS - Wertigkeiten verändern mit der !important-Regel

PHP - Dateien auslesen und absteigend nach Datum sortieren

JavaScript - Bild mit dem Mausrad vergrößern

MySQL - Datensatz löschen

Scheinlinks
gemeint sind damit unterstrichene Wörter und Wörter in der typischen blauen Linkfarbe. Der Besucher klickt darauf und muss enttäuscht feststellen, dass es sich gar nicht um einen Link handelt.