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>

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!

A web and application developer, based in Chicago, IL. Founder of Dragon Fruit Development (www.dragonfruitdevelopment.com) More articles by Todd Dunham
  • 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.

    • scott

      iCodeGuy… I apologize for hi-jacking this thread, but I have a question. Approx. 3 years ago Keenan Payne posted a modal pop-up box that will be perfect for my needs. However, I need it to “pop-up” as the HTML page is rendered and not require any user action (ie: click this link, etc.) to open it.

      I am new to all of this (as an aging “dinosaur” developer) and want it to pop up (replace the table row/column) as part of a PHP script (below):

      /*if an error is returned – do the following*/

      /*replace the following line w/the modal pop-up*/

      How can I achieve this? I have Googled for ways to create an “auto open modal pop-up” but can’t seem to find an answer.


  • 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

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress