Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

January 02 2012

13:00

December 10 2010

16:21

Quick Tip: Mimic a Click Event with 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="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!

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...