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

Holiday Christmas Lights Animation Tutorial CSS JavaScriptParallax Effect Animation Multiple Background CSS TutorialBackground Position keyframes Animation CSS TutorialFolding Content Nav Menu CSS3 Animation JavaScript 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