Skip to content

Instantly share code, notes, and snippets.

@marcialca
Created November 9, 2012 01:18
Show Gist options
  • Save marcialca/4043107 to your computer and use it in GitHub Desktop.
Save marcialca/4043107 to your computer and use it in GitHub Desktop.
[CSS] Click Event CSS3
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment