Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m

Quick Tip: Mimic a Click Event with CSS

by Jeffrey Way10 Dec 2010

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="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!