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);
}
