Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Image Zoom Effect Animation CSS3 HTML Tutorial

Learn to create animated image zoom effects for little thumbnail images using CSS transitions. We will also talk about triggering the zoom effect using JavaScript event handling to target other events such as click, doubleclick, and more events that CSS alone cannot give you access to. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> .pic{ width:50px; height:50px; } .picbig{ position: absolute; width:0px; -webkit-transition:width 0.3s linear 0s; transition:width 0.3s linear 0s; z-index:10; } .pic:hover + .picbig{ width:200px; } </style> </head> <body> <img class="pic" src="adam_khoury.jpg" alt="Adam"> <img class="picbig" src="adam_khoury.jpg" alt="Adam"> <img class="pic" src="heart.png" alt="heart"> <img class="picbig" src="heart.png" alt="heart"> <img class="pic" src="hardhat.jpg" alt="hardhat"> <img class="picbig" src="hardhat.jpg" alt="hardhat"> </body> </html>
thumb

CSS Videos

Animation Rigging

Folding Content Nav Menu CSS3 Animation JavaScript TutorialBackground Position keyframes Animation CSS TutorialParallax Effect Animation Multiple Background CSS TutorialPure CSS Animated Menu Button Transitionskeyframes Animation Tutorial Floating ElementsAnimated Repeating Tile Background keyframes TutorialFlip 3D Boxes and Cards Animation CSS TutorialFlash and Pulse Effects keyframes Animation TutorialImage Zoom Effect Animation CSS3 HTML Tutorial