אפקט תמונה גודלת במעבר עכבר בקלות עם CSS

[html] <div class="ofhidden imgZoom1"> <img src="https://lorempixel.com/360/240" alt="" /> </div> [/html]

[css] .ofhidden {overflow: hidden;}

.imgZoom1:hover img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } [/css]

[html] <div class="ofhidden imgZoom2"> <img src="https://lorempixel.com/360/240" alt="" /> </div> [/html]

[css] .ofhidden {overflow: hidden;}

.imgZoom2:hover img { -webkit-transform: scale(0.85); -moz-transform: scale(0.85); -ms-transform: scale(0.85); -o-transform: scale(0.85); transform: scale(0.85); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } [/css]

[html] <div class="imgZoom3"> <img src="https://lorempixel.com/360/240" alt="" /> </div> [/html]

[css] .imgZoom3:hover img { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; } [/css]