Name: Mimic a "Click" Effect with Only CSS
Uploaded: 2015-01-05
Description: In this 4-minute web development quick tip, I'll show you a nifty technique that allows you to simulate a click-effect with only CSS.

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!

Quick Tip: Mimic a Click Event with CSS

Final Source

Conclusion

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: