Stylish Author Box with Social Links [HTML and CSS]

If your are blogger then you should have author box at below your every blog post. Here is Stylish author box which you can use. In this author box you can give credit to author, with his profile pic, social links and bio.

CSS for Author Box

.author-box{
max-width:700px;
width:75%;
}
.author-box div.author-img, .author-box div.author-content{
display:inline-block;
float:left;
}
.author-box div.author-content{
margin-left:10px;
}
.author-box div.author-img img{
width:150px;
height:150px;
filter:grayscale(1);
-webkit-filter:grayscale(1);
border-radius:50%;
}
.author-box div.author-img img:hover{
width:150px;
height:150px;
-webkit-filter:grayscale(0);
filter:grayscale(0);
}
.author-box div.author-content h2{
line-height:10px;
font-size:30px;
}
.author-box div.author-content div.social-links ul{
padding:0px;
}
.author-box div.author-content div.social-links ul li{
list-style:none;
float:left;
display:inline-block;
color:#fff;
border-radius:70px;
margin:2px;
}
.author-box div.author-content div.social-links ul li:hover,.author-box div.author-content div.social-links ul li a:hover{
padding-right:15px;
}
.author-box div.author-content div.social-links ul li.fbl{
background:#6284B5;
}
.author-box div.author-content div.social-links ul li.tw{
background:#38CDFF
}
.author-box div.author-content div.social-links ul li.gp{
background:#EF5A46;
}
.author-box div.author-content div.social-links ul li.ln{
background:#51A7C0;
}
.author-box div.author-content div.social-links ul li.pi{
background:#FC5F64;
}
.author-box div.author-content div.social-links ul li a:hover span{
float:left;
}
.author-box div.author-content div.social-links ul li a span.sl{
display:inline-block;
width:49px;
height:49px;
margin:0px;
outline: none;
position:relative;
float:left;
}
.author-box div.author-content div.social-links ul li a span.sl-facebook{
background:url(facebook.png);}
.author-box div.author-content div.social-links ul li a span.sl-twitter{
background:url(twitter.png);}
.author-box div.author-content div.social-links ul li a span.sl-google-plus{
background:url(googleplus.png);}
.author-box div.author-content div.social-links ul li a span.sl-linkedin{
background:url(linkedin.png);}
.author-box div.author-content div.social-links ul li a span.sl-pinterest{
background:url(pinterest.png);}
.author-box div.author-content div.social-links ul li a span.slt{
display:none;}
.author-box div.author-content div.social-links ul li a:hover span.slt{
display:inline-block;
color:#fff;
font-size:30px;
line-height:45px;
margin-left:5px;
}
@media (max-width:767px) {
.author-box div.author-content div.social-links ul li a span.slt,.author-box div.author-content div.social-links ul li a:hover span.slt{
display:none;
}
.author-box div.author-content div.social-links ul li:hover, .author-box div.author-content div.social-links ul li a:hover{
padding-right:0px;
}
}
@media (max-width:512px) {
.author-box div.author-content h2{
line-height:normal;
font-size:30px;
}
}

Here is Image used for Social Media Icons. You can download or use your own.

Read :- Shutter Page Loading effect with Jquery and CSS

HTML Code for Author Box

<div class="author-box">
<div class="author-img">
<img src="Your Image URL" alt="Divy Singh Rathore"/>
</div>
<div class="author-content">
<h2>Divy Singh Rathore.</h2>
<p>I live in Indore, India.<br/>I like to play with HTML, PHP, Javacript, JQeury, CSS.</p>
<div class="social-links">
<ul>
<li class="fbl"><a href="Social Profile Link"><span class="sl sl-facebook"></span><span class="slt">Facebook</span></a></li>
<li class="tw"><a href="Social Profile Link"><span class="sl sl-twitter"></span><span class="slt">Twitter</span></a></li>
<li class="gp"><a href="Social Profile Link"><span class="sl sl-google-plus"></span><span class="slt">Google Plus</span></a></li>
<li class="ln"><a href="Social Profile Link"><span class="sl sl-linkedin"></span><span class="slt">Linkedin</span></a></li>
<li class="pi"><a href="Social Profile Link"><span class="sl sl-pinterest"></span><span class="slt">Pinterest</span></a></li>
</ul>
</div>
</div>
</div>

Read :- Animated Box Shadow

* Note - Replace 'Your Image URL' with with image url you use. Also replace Social Profile Link with your links. Social Media Icon are Registered Trade mark of their respective owners.

Don't Forgot to Share this Post

About Author: Divy Singh Rathore

I am Founder of Codoat and live in Indore, India.
I am doing Engineering in Computer Science and like to do programming & designing.
Proud to be an Indian