JSFiddle - React, Tailwind, and code Playground
HTML
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=249542111751132";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="content-box">
<div class="thumb">
<a href="#" title="#"><img src="img/th-pic.jpg" alt="#" width="58" height="58" /></a>
</div>
<div class="story">
<h3>Statewide 4-H Golf</h3>
<p>Challenge to score with exercise, fun, education sollicitudin dolor euismod</p>
</div>
<div class="clear"></div>
<div class="story-hover">
<div class="social">
<div class="fb"><fb:like href="http://www.youreasttexas.com" send="false" layout="button_count" width="80" show_faces="false" font="arial"></fb:like></div>
<div class="s-gplus"><div class="g-plusone" data-size="medium" data-annotation="none"></div></div>
<div class="s-tweet"><a href="https://twitter.com/share" class="twitter-share-button" data-via="twitterapi" data-lang="en" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
...
CSS
.content-box{
background:url('img/sprite.png') no-repeat -12px -243px;
width:275px;
height:103px;
margin-bottom:25px;
position:relative;
}
.content-box .story-hover{
background:url('img/sprite.png') no-repeat 0 -347px;
width:275px;
height:31px;
position:absolute;
bottom:0px;
z-index:50;
display: none
}
.story-hover .social{
margin-top: 6px;
float: right;
}
.story-hover .social .s-tweet{
margin-left: 20px;
width: 64px;
}
.story-hover .social .fb_iframe_widget{
width: 48px;
overflow: hidden;
}
.content-box-result .story{
width:500px;
margin:0px 5px 5px 0px;
float:left;
}
.content-box-result .story p{
color:#333333;
}.content-box-result h2 a{
color: #333 !important;
}
#cm-content .content-box-result h2 a:hover{
text-decoration: none !important;
}
#cm-content .blue a{
color:#003399;
}
#cm-content .content-box-result h2{
font-family: 'Abel', Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: normal;
text-transform: inherit;
margin:0px;
padding:10px;
}
.content-box:hover .story-hover{
}
.thumb{
float:left;
border:1px solid #cccccc;
width:58px;
height:58px;
margin:10px;
}
.story{
width:184px;
margin:10px 5px 5px 0px;
float:left;
cursor: pointer;
}
.story p{
margin-top:4px;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
color:#333333;
line-height:1.4;
}
JavaScript
$('.content-box').hover(function() {
$(this).children('.story-hover').stop(true, true).fadeIn(250);
}, function() {
var t = $(this).children('.story-hover');
setTimeout(function() {
t.stop(true, true).fadeOut(250);
}, 150);
});