CODEWITHSUNDEEP
css
happycoding
happycoding

Reputation: 458

Make icons pop out only on icon hover not div

Hi i am attemptting to make a pop out menu, so when the main icon is hovered or clicked if need be, then the other icons slide out left and right. But currently it pops out when you hover anywhere in the div container rather then just the main icon (icon 3 in this case).

I dont mind having to use script but even then have not been able to islote it.

here is the code:

fiddle: https://jsfiddle.net/oxe6jg1L/2/

html:

<div class="social-icons">
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="https://plus.google.com">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Linkedin Icon">
                </a>
            </div>
        </div>
</div>

css:

.social-icons {
    margin: 0 auto;
    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;
}

Upvotes: 1

Views: 1245

Answers (1)

A.K.
A.K.

Reputation: 2322

You added hover property on social-icons class that's why it's working on div. I added one more inner div into social-icons div and added all property on that div. New div class is social-icons-inner

.social-icons {
    margin: 0 auto;
    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-inner:hover .social-icons-image:nth-child(1) {
    top: 0px;
    left: 0%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(2) {
    top: 0px;
    left: 20%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(4) {
    top: 0px;
    left: 60%;
    width: 20%;
    opacity: 1;
}

.social-icons-inner:hover .social-icons-image:nth-child(5) {
    top: 0px;
    left: 80%;
    width: 20%;
    opacity: 1;
}
<div class="social-icons">
  <div class="social-icons-inner">
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="https://plus.google.com">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="test">
                </a>
            </div>
            <div class="social-icons-image">
                <a href="">
                    <img src="https://www.facebook.com/images/fb_icon_325x325.png" alt="Linkedin Icon">
                </a>
            </div>
        </div>
        </div>
</div>

Upvotes: 2

Related Questions