Fancy Social Media Icons that spread out when you hover them.
A Pen by Christophe Chabot on CodePen.
<div class="social-icons"> | |
<div class="social-icons-image"> | |
<a href="http://www.instagram.com"> | |
<img src="http://tazindaniels.com/wp-content/uploads/2014/10/instagram-transparent.png" alt="Instagram Icon"> | |
</a> | |
</div> | |
<div class="social-icons-image"> | |
<a href="http://www.facebook.com"> | |
<img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Facebook Icon"> | |
</a> | |
</div> | |
<div class="social-icons-image"> | |
<a href="http://www.twitter.com"> | |
<img src="http://jonbennallick.co.uk/wp-content/uploads/2012/11/Twitter-Logo-Icon-by-Jon-Bennallick-02-300x300.png" alt="Twitter Icon"> | |
</a> | |
</div> | |
<div class="social-icons-image"> | |
<a href="http://plus.google.com"> | |
<img src="http://www.androidpolice.com/wp-content/uploads/2013/06/nexusae0_g.png" alt="Google Plus Icon"> | |
</a> | |
</div> | |
<div class="social-icons-image"> | |
<a href="http://www.linkedin.com"> | |
<img src="http://www.foodbanknyc.org/_gfx_/icon-linkedin.png" alt="Linkedin Icon"> | |
</a> | |
</div> | |
</div> |
.social-icons { | |
margin: 0 auto; | |
/* You just need to change the width and height | |
of your div here. | |
The size of the images will adapt automatically. | |
Make sure that the width is 5 times the height | |
for better results.*/ | |
width: 640px; | |
height: 128px; | |
position: relative; | |
} | |
.social-icons .social-icons-image { | |
display: inline-block; | |
position: absolute; | |
width: 33%; | |
height: auto; | |
z-index: 2; | |
opacity: 1; | |
transition: all .5s; | |
padding: 2%; | |
box-sizing: border-box; | |
} | |
.social-icons .social-icons-image a { | |
display: inline-block; | |
width: 100%; | |
height: 100%; | |
} | |
.social-icons img { | |
width: 100%; | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
.social-icons a:hover img { | |
width: 110%; | |
height: auto; | |
margin: -5%; | |
} | |
.social-icons .social-icons-image:nth-child(1) { | |
left: 33.755%; /*(nth-child(2).left - (50% * 20%)/4)*/ | |
top: 25%; /*((100%-50%)/2)*/ | |
z-index: 0; | |
width: 10%; /*(50% * 20%)*/ | |
height: auto; | |
opacity: .5; | |
} | |
.social-icons .social-icons-image:nth-child(2) { | |
left: 36.25%; /*(40% - (75% * 20%)/4)*/ | |
top: 12.5%; /*((100%-75%)/2)*/ | |
z-index: 1; | |
width: 15%; /*(75% * 20%)*/ | |
height: auto; | |
opacity: .75; | |
} | |
.social-icons .social-icons-image:nth-child(3) { | |
left: 40%; | |
z-index: 2; | |
width: 20%; | |
height: auto; | |
} | |
.social-icons .social-icons-image:nth-child(4) { | |
left: 48.75%; /*(60% - 3*(75% * 20%)/4*/ | |
top: 12.5%; /*((100%-75%)/2)*/ | |
z-index: 1; | |
width: 15%; /*(75% * 20%)*/ | |
height: auto; | |
opacity: .75; | |
} | |
.social-icons .social-icons-image:nth-child(5) { | |
left: 56.25%; /*(nth-child(4).left + (nth-child(4).width- 3*(50% * 20%)/4)*/ | |
top: 25%; /*((100%-50%)/2)*/ | |
z-index: 0; | |
width: 10%; /*(50% * 20%)*/ | |
height: auto; | |
opacity: .5; | |
} | |
.social-icons:hover .social-icons-image:nth-child(1) { | |
top: 0px; | |
left: 0%; | |
width: 20%; | |
opacity: 1; | |
} | |
.social-icons:hover .social-icons-image:nth-child(2) { | |
top: 0px; | |
left: 20%; | |
width: 20%; | |
opacity: 1; | |
} | |
.social-icons:hover .social-icons-image:nth-child(4) { | |
top: 0px; | |
left: 60%; | |
width: 20%; | |
opacity: 1; | |
} | |
.social-icons:hover .social-icons-image:nth-child(5) { | |
top: 0px; | |
left: 80%; | |
width: 20%; | |
opacity: 1; | |
} |