CSS for Twitter-Like Hover Effects

Here’s a cool CSS technique that we can use to give a hover effect to a group of divs, and then an additional effect to the element being hovered on!

Twitter uses this effect with their sharing links on a tweet. When you hover over an individual tweet, the reply, retweet and favorite links appear, like this:

Twitter Links

But then when you place your cursor over one of the links, it becomes underlined, while the others remain revealed, but not underlined, like this:

Twitter Links Hover

In this example we’ll create the same effect. We’ll use divs that will not be visible until we hover over the parent div, and then we’ll underline each div once it is hovered on.

Here’s our HTML:

<section class="parent">
 <p>Section text would go here</p>
  <div class="child">Share</div>
  <div class="child">Like</div>
  <div class="child">Tweet</div>
</section>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And our CSS looks like this:

.parent {
    width: 400px;
    height: 100px;
    background: #fff;
    border: 2px solid #000;
    margin: 10px;
    }
.child {
    opacity: 0;
    color: #000;
    margin-left: 10px;
    float: right;
    }
.child:hover {
   opacity: 1.0;
    text-decoration: underline;
    cursor: pointer;
    }
.parent:hover > .child {
    opacity: 1.0;
    }

Check out a live (editable) demo here: DEMO

Feel free to ask any questions in the comments below!

SHARE THIS POST
  • Brandon

    Adding a CSS3 transition to the hover effect – like transition:all .3s (plus applicable vendor/browser prefixes) – is a nice progressive enhancement for hover effects like this.

    • Todd

      Absolutely, I’m a big fan of transitions, adding them to this effect would look great!

  • iCodeGuy

    Awesome. I always wondered how Twitter achieved this hover effect.

  • Spinx Inc. in New York

    Yes, I tried this code and through this code, I got an
    excellent effect of transition. I recommend you to use this code for this
    effect.