Attempting to create a pop-out menu where the main icon triggers other icons to slide out left and right upon hover or click. The issue currently is that the pop-out occurs whenever hovering within the div container, rather than just on the main icon (icon 3).
I am open to using scripts but have not been successful in isolating the behavior.
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>
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;
}
/* Remaining CSS properties... */