CODEWITHSUNDEEP
jquerycss
Sleek Geek
Sleek Geek

Reputation: 4686

fadeIn a text via CSS content method on Hover

I'm trying to fadeIn a text on an element via CSS content method but it doesn't seem to be working. my code is as shown below. Is this not possible or can it be achieved.

HTML

 <div id="share-box">
   <i class="fa fa-rss"></i>
 </div><!-- End Share Box -->

CSS

#share-box {
float: right;
height: 100px;
font-size: 72px;
width: 80px;
color: #fff;
font-weight: lighter;
padding-top: 15px;
background-color: #E18728;
padding-left: 25px;
cursor: pointer;
        }

#share-box:before {
content: 'RSS';
position: absolute;
font-size: 24px;
padding: 70px 0 0 15px;
display: none;
    }

Script

jQuery(document).ready(function(){ 

 $("#share-box").mouseover(function(){

 $("#share-box:before").stop().fadeIn();

  });



 $("#share-box").mouseout(function(){

 $("#share-box:before").stop().fadeOut('slow');

  });

});

Link to the fiddle

Upvotes: 0

Views: 67

Answers (1)

Abhitalks
Abhitalks

Reputation: 28387

As commented by @Phil, You could just use the :hover pseudo-class along with transition to achieve that. JS not required really.

Demo: http://jsfiddle.net/abhitalks/z3A33/

#share-box:before {
    ...
    opacity: 0; /* use opacity to get it working with transition */
    -webkit-transition: all 1s; /* use transition to get fading effect */
    transition: all 1s; /* use standards after vendor prefixes */
}
#share-box:hover::before {
    opacity: 1; /* change opacity on hover */
}

Note: You need something like opacity to get the transition working. Transitions won't work with display.

Upvotes: 3

Related Questions