wp: Create Hot Post like techtunes.com.bd

hot-post.php

<!-- Hop Post Area-->

<div class="hot_post">
	<header>
		<ul>
			<li><img src="<?php echo get_template_directory_uri(); ?>/images/hot_post.png" alt="hot post"></li>
			<li><h1>Hot Posts</h1></li>
		</ul> 
	</header>

	<div class="hot_post_list">
		<ul>
			<?php $query = new WP_Query( array(
			    'post_type' => 'post',
			    'category_name' => 'Hot Post',
			    'posts_per_page' => 8
			) );

			while ($query->have_posts()) : $query->the_post(); ?>

					<li>
						<div class="hot_post_single">

							<?php if(has_post_thumbnail()): ?>
       							<a href="<?php the_permalink(); ?>" class="hot_post_thumbnail" title="<?php the_author(); ?>"><?php  the_post_thumbnail(); ?></a>
							<?php  endif; ?>

							<?php echo get_avatar( get_the_author_meta( 'ID' ), 40 ); ?>

						</div>
						<div class="hot_post_title"><?php the_title(); ?></div>
					</li>
			<?php endwhile; ?>
		</ul>
	</div>


</div> <!-- end hot_post -->

hot_post.css

/* STYLE FOR HOT POST */
.hot_post {
	width: 100%;
	border: 1px solid rgba(0,0,0,.2);
	padding: 5px 10px 10px 10px;
	margin-bottom: 14px;
	overflow: hidden;
	position: relative;
	height: 220px;

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.hot_post header {
	width: 100%;
	text-align: center;
	margin-bottom: 16px;
	overflow: hidden;
}

.hot_post header>ul {
	display: inline-block;
}

.hot_post header>ul li {
	float: left;
}

.hot_post header>ul li h1 {
	position: relative;
	top: 16px;
}

.hot_post header>ul li img {
	margin-right: 10px;
}

.hot_post_list {
	text-align: center;
}

.hot_post_list>ul {
	display: inline-block;
}

.hot_post_list>ul li {
	float: left;
}

.hot_post_list ul li .hot_post_single {
	height: 100px;
}

.hot_post_thumbnail img {
	border: 3px solid #fff;

	-webkit-box-shadow: 0 0 1px rgba(0,0,0,.5);
	box-shadow: 0 0 1px rgba(0,0,0,.5);
	display: block;
	position: relative;
	width: 80px;
	height: 80px;

	-webkit-transition: all 1;
	-moz-transition: all 1;
	-o-transition: all 1;
	-ms-transition: all 1;
	transition: all 1;
}

.hot_post_thumbnail img:hover {
	top: 2px;
}

.hot_post_list a {
	display: block;
	margin: 0 13px;
	margin-bottom: 20px;
	position: relative;
}

.hot_post_single>img {
	display: block;
	top: -136px;
	left: 78px;
	position: relative;

	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
	display: none;
}

.hot_post_title {
	position: absolute;
	text-align: center;
	font-size: 21px;
	font-weight: bold;
	color: #26b;
	line-height: 1.5em;
	padding: 0 10px;
	display: none;
	width: 100%;
	left: 0;
}

index.html

<div class="hot_post">
	<header>
		<ul>
			<li><img src="<?php echo get_template_directory_uri(); ?>/images/hot_post.png" alt="hot post"></li>
			<li><h1>Hot Post</h1></li>
		</ul> 
	</header>
	<div class="hot_post_list">
		<ul>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar" class="hot_post_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpess. And this is new post.</div>
			</li>
			<li>
				<div class="hot_post_single">
					<a href="" class="hot_post_thumbnail"><img src="http://lorempixel.com/83/83" alt="post title"></a>
					<img src="http://lorempixel.com/40/40" alt="autor_avatar">
				</div>
				<div class="hot_post_title">This is post for wordrpessThis is post for wordrpess</div>
			</li>
		</ul>
	</div>
</div> <!-- end hot_post -->

script.js

// Script For Hot tooltips

 jQuery(".hot_post_thumbnail").mouseover(function(){
     jQuery(this).closest('li').find(".hot_post_title").show(1);
  });

  jQuery(".hot_post_thumbnail").mouseout(function(){
	  jQuery(this).closest('li').find(".hot_post_title").hide(500);
  });



 jQuery(".hot_post_thumbnail").mouseover(function(){
     jQuery(this).closest('li').find(".hot_post_single>img").css("display","block");
  });

  jQuery(".hot_post_thumbnail").mouseout(function(){
    jQuery(this).closest('li').find(".hot_post_single>img").css("display","none");
  });

})