Fancy Social Media Icons (v1)
<style>.social-icons {
margin: 0 auto;
/* foulscode.com*/
width: 640px;
height: 128px;
position: relative;
}
.social-icons .social-icons-image {
display: inline-block;
position: absolute;
width: 20%;
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: 80%;
height: 0%;
}
.social-icons img {
width: 80%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.social-icons a:hover img {
width: 100%;
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;
}
/* foulscode.com*/
</style>
<div class="social-icons">
<div class="social-icons-image">
</div>
<div class="social-icons-image">
<a href="https://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="https://www.twitter.com">
<img src="https://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="https://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">
</div>
</div>
Σχόλια