Fancy Social Media Icons (5 Icons)

Fancy Social Media Icons (5 Icons).markdown

Fancy Social Media Icons (5 Icons)

Fancy Social Media Icons that spread out when you hover them.

A Pen by Christophe Chabot on CodePen.

License.

index.html

<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>

style.css

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