JSFiddle - React, Tailwind, and code Playground

by Ajey

HTML

<div id="main-content" class="container animated"> <div id="content">
<article class="post-65 post type-post status-publish format-standard hentry category-thoughts tag-example tag-standard tag-tag item-list">
<div class="post-format-icon">
    <img src='http://icons.iconarchive.com/icons/treetog/i/128/Floppy-Small-icon.png' width="50px" height="50px" />
<p>10:00</p>
</div>

CSS

#main-content {
    margin-top: 50px;
}



time {
    margin-top: 30px;
}

.item-list{
	border-top: 8px solid #B11119;
	position: relative;
	padding-bottom: 120px;
	margin:12px 0 130px;
	border-bottom: 1px solid #f2f2f0;
}
.item-list .post-format-icon{
	display: block;
	line-height: 26px;
	width: 55px;
	height: 55px;
	background: #b11119;
	position: absolute;
	top: -29px;
	left: 50%;
	margin:0 0 0 -25px;
	-webkit-border-radius: 55px;
	-moz-border-radius: 55px;
	border-radius: 55px;
	z-index: 9;
	text-align: center;
	color: #FFF;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.item-list .post-format-icon:before, .no-thumbnail a:before{
	width: 55px;
	height: 55px;
	text-align: center;
	line-height: 55px;
	font-size:28px;
	-webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    text-decoration: none;
}

.item-list a.item-date{
	left: 0;
	width: 55px;
	height: 55px;
	text-align: center;
	position: absolute;
	top: 0;
	opacity:0;
	display: block;
	color:#FFF !important;
}
.item-list:hover a.item-date{ opacity:1; }
.item-list:hover .post-format-icon:before{ font-size:0;}
.item-list.format-aside .entry, .item-list.format-status .entry{ padding-top: 30px;}

JavaScript

$('.post-format-icon').hover(function(){
   $('img').fadeOut(); 
});