Thumbnails are used to show a brief preview of a post, product or etc. However, its presentations is very important. Usually, they contain a title and a short text explaining what is inside. Putting social buttons can rich the thumbnails more. The following code provides a thumbnail with sharing buttons and a title box which appears on hover. See it, use it!


HTML
<!-- This script got from www.devanswer.com -->
<div class="profilebox profilebox1">
<div class="SocialIcons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
<div class="profileInfo">
<h3>Galaxy Zone</h3>
</div>
</div>
<div class="profilebox profilebox1">
<div class="SocialIcons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
<div class="profileInfo">
<h3>Galaxy Zone</h3>
</div>
</div>

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
                        

CSS
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,500i,700,900');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,300,400,500,600,700,800');
*, *:before, *:after {
	box-sizing: border-box !important;
}
body {
	color: #6b6b6b;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
}
.profilebox {
	width: 300px;
	height: 350px;
	background: #eee;
	cursor: pointer;
	float: left;
	margin: 30px;
}
.profilebox1 {
	background-image: url("http://devanswer.com/codes/files/thumbnail-code.jpg");
	background-position: center center;
	background-size: cover;
	perspective: 450px;
	position: relative;
}
.profilebox .SocialIcons {
	display: flex;
	flex-direction: column;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 15px;
	transform: rotateY(90deg);
	transform-origin: left center 0;
	transition: all 350ms ease;
}
.profilebox .SocialIcons a {
	background: #ffffff none repeat scroll 0 0;
	font-size: 20px;
	height: 50px;
	margin-bottom: 1px;
	position: relative;
	text-align: center;
	width: 50px;
}
.profilebox .SocialIcons a i {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}
.profilebox .SocialIcons a:nth-child(1) {
}
.profilebox .SocialIcons a:nth-child(2) {
}
.profilebox .SocialIcons a:nth-child(3) {
}
.profilebox:hover .SocialIcons {
	opacity: 1;
	left: 15px;
	transform: rotateY(0deg);
}
.profilebox .profileInfo {
	background: #ffffff none repeat scroll 0 0;
	bottom: 0;
	height: 50px;
	left: 0;
	margin: 0 auto;
	position: absolute;
	right: 0;
	width: 90%;
	transform: rotatex(90deg);
	transform-origin: bottom center 0;
	transition: all 350ms ease;
	opacity: 0;
}
.profilebox .profileInfo h3 {
	font-size: 20px;
	margin: 15px 0;
	text-align: center;
}
.profilebox:hover .profileInfo {
	opacity: 1;
	bottom: 15px;
	transform: rotatex(0deg);
}