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

Eine zufällige Auswahl von „Bausteinen” aus den Bereichen CSS, PHP, JavaScript und MySQL.

CSS - Kalender Symbol neben dem Datepicker

PHP - Formulareingaben überprüfen und Fehlermeldungen ausgeben

JavaScript - 1 x Klick Button

MySQL - Die 10 neusten Einträge einer Tabelle anzeigen