Advertisement
Advertisement
Advertisement
Advertisement
by Jeffrey Way
Difficulty:IntermediateLength:QuickLanguages:
In today's video quick tip, I'll show you a nifty technique: we'll use plain and simple CSS to mimic click events. The key is to use the helpful :target
pseudo class.
Final Source
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style> figure { background: #e3e3e3; display: block; float: left;} #zoom { width: 200px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } /* Compliance = IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */ #zoom:target { width: 400px; } </style> </head> <body> <h1> "Click" Effect with CSS </h1> <figure> <img id="zoom" src="https://d2o0t5hpnwv4c1.cloudfront.net/871_dryEE/dry-ee.png" alt="EE" /> <figcaption> <ul> <li> <a href="#zoom">Zoom In</a> </li> <li> <a href="#">Zoom Out</a> </li> </ul> </figcaption> </figure> </body> </html>
Conclusion
So what do you think? Pretty neat, huh? On a side note, within the comments, I'd like to know what your thoughts are on my usage of the figcaption
element to house those "Zoom" links that are associated with the image. Do you think that's a fair usage of the element? Thanks for watching!
Advertisement
Advertisement
Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyAdvertisement
Translations
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this postPowered by![Native Native]()

Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.