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="http://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!
Comments