About design and nearby

Hover Effect with the css3 Transition

Posted: September 11th, 2013 | Author: | Filed under: Tips and Tricks | Tags: , , | No Comments »

The power of CSS3 is huge and I’d like to show how to use it in some creative way – without any plugins powered by javascript. I’m going to create a hover effect with CSS3 transitions. On hover over a text element the arrow will move smoothly to the one side and the text – to the opposite side.

Note: this animation will only work properly in modern browsers that support the CSS3 properties in use.

The example:

The structure of markup:
I create a container that will have the image (an arrow) and the text.

  1. <div class="read-more-wrapper">
  2. <a href="#" class="read-more">Read More</a>
  3. </div>

The magic CSS for the effect:
I applied a transition property which is used when changing from the start to the end state and reversing from the end to the start state. And the next required thing is the ‘:hover’ selector. All together they give a sweet result ;)

  1. a {
  2. -webkit-transition: all 300ms ease-in-out;
  3. -moz-transition: all 300ms ease-in-out;
  4. -o-transition: all 300ms ease-in-out;
  5. -ms-transition: all 300ms ease-in-out;
  6. transition: all 300ms ease-in-out;
  7. }
  8. .read-more-wrapper {
  9. display:block;
  10. overflow:hidden;
  11. }
  12. .read-more {
  13. float: left;
  14. display: block;
  15. line-height: 10px;
  16. background: url(../images/more-arrow.png) no-repeat center right;
  17. padding-right: 12px;
  18. margin: 5px 0;
  19. }
  20. a.read-more {    
  21. background-image: url(../images/more-arrow.png);
  22. }
  23. .read-more:hover {
  24. background-position: center left;
  25. padding-left: 12px;
  26. color: #479ccf;
  27. }

Standalone example: view the example >>

Share Button

Check Related Posts:

Leave a Reply

  • 7 − six =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now