Only display icons when hovering over the icon, not the entire div

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... */

Answer №1

You have successfully applied the hover property to the social-icons class within the div. I further improved this functionality by introducing an additional inner div called social-icons-inner where all properties are now placed.

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

// CSS code continues...

<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>
            // HTML code continues...
        </div>
        </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Different Div Sizes Based on Device Type (Bootstrap)

I am currently working on a Bootstrap 3 website and have several small divs displayed on the page. I want to adjust their size for desktop view and make them full width for mobile view. Here is my approach: I attempted to place each small div within a co ...

Replacing CSS conditional statements with jQuery

My CSS code is set to hide the #global-widget-base tag and display a tab #aside-expander when the browser width is less than 1200px. @media screen and (max-width: 1200px) { aside#global-widget-base { display: none !important; } #aside- ...

What methods can be used to restrict users from navigating to the previous or next page while they are scrolling horizontally within a scrollable div?

Experiencing a frustrating UX issue that arises from using a wide table within a scrollable div on a webpage. The problem occurs when users scroll horizontally using a trackpad on a mac, they sometimes unintentionally trigger the "go to next/last page" fe ...

The minmax() function is causing grid items to not wrap correctly

I have been working on creating a responsive web page where the "boxes" automatically adjust to a new row when the browser window is resized. To achieve this, I utilized the following CSS code: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); ...

Steps to show submenus upon hovering over the main menu items

I am trying to create a vertical menu with multiple levels using HTML and CSS. Here is the code I have written so far: <ul> <li>Level 1 menu <ul> <li>Level 2 item</li> <li>Level 2 item</li&g ...

Hexagonal border with embedded image

I'm striving to achieve the image below: https://i.sstatic.net/iZIex.png I've managed to create a hexagon border and text, but I'm unsure how to incorporate the hexagon image and create a grid of 3 hexagons. Any assistance would be greatl ...

Add CSS styling to a single form

When working on a larger project, the goal is to reduce the size of various elements within a form named quickpost-form <div id="qp-form"> Specific elements in the form require a smaller font size such as text, input, input-group, and tex ...

What steps can be taken to avoid my Bootstrap banner wrapping to a new line?

I am facing an issue while designing a top banner using Bootstrap. The condensed menu always wraps to a new line for the resolution of 1024x768. It works fine for resolutions greater than 1024x768. I need help with correcting my HTML so that the banner rem ...

Is there a way to program custom key assignments for my calculator using JavaScript?

As a beginner in the world of coding and JavaScript, I decided to challenge myself by creating a calculator. It's been going smoothly up until this point: My inquiry is centered around incorporating keys into my calculator functionality. Currently, th ...

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

Scrolling CSS Divisions Along the Horizontal Axis

.group { background: #000; margin-left: 25px; margin-right: 25px; padding: 15px; width: inherit; white-space: nowrap; overflow-x: auto; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .item { margin: 3px; backgro ...

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

Optimizing CSS table styles for larger cell width

In my CSS file, I have defined the following style: .ES{ max-width:20px; word-wrap:break-word; } However, when I apply this to my table... <table border="1" cellpadding="2" class="ES" > <tr> <td><input name="rbeso" type="radio" ...

Exploring the differences between two CSS style attributes using JQuery

Can someone help me with a quick question about CSS? I need to compare two style attributes, specifically margin-left. If the margin-left is less than 500px, I don't want to make any changes. However, if it's greater than 500px, I want to add ano ...

The color scheme detection feature for matching media is malfunctioning on Safari

As I strive to incorporate a Dark Mode feature based on the user's system preferences, I utilize the @media query prefers-color-scheme: dark. While this approach is effective, I also find it necessary to conduct additional checks using JavaScript. de ...

Adjustable Size with jQuery UI - Resizing Multiple Divs Causes Movement of Adjacent Divs

I've been experimenting with a webpage that consists of a div element containing multiple nested divs and jQuery UI resizable functionality. Essentially, it's a dashboard comprised of individual widgets. My goal is to resize each widget independe ...

The horizontal scrollbar in Chrome is unexpectedly activated, despite elements being set to occupy the full screen width (100vw) using Tailwind and NextJS 13.4+

It took some time to identify the root cause of this issue within a larger project. Hopefully, this Question and Answer will be beneficial to someone else. Here is the scenario -- in a NextJS/Tailwind project, there is only one large vertical element on t ...

Can you explain the purpose of including text-rendering: optimizeLegibility in a CSS stylesheet?

Can you explain the significance of setting text-rendering to optimizeLegibility in a CSS file? For example, like this: html { text-rendering: optimizeLegibility; } ...

When the icon is clicked, the text goes over the ul and the mobile slide menu goes beneath it

click here for the image Is there a way to make the text move below when I click on the hamburger menu icon? ...

What is the best way to shift all elements to the right side except for 'tindog'?

https://i.sstatic.net/hAUps.png <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="">Tindog</a> <button class="navbar-toggler" type="button" data-t ...