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.

<dd> Definitionsliste

CSS - Display-Flex mit Tabellen

PHP - Alle PHP Funktionen auflisten

JavaScript - Neues Fenster öffnen

MySQL - Eintrag überschreiben