Adjust the display from none to block when the parent element is set to flex

JSFiddle Demo

Issue with -

.popupcard_first:hover .popupcard_first { 
    display: block; 
} 

I am trying to link the :hover effect to the first card only, but the only way I could make it work is by changing .popupcard... to

.featured_cards:hover .popupcard_first { 
    display: block; 
}

However, this applies to every element in the row which is not what I want.

<div class="featured_cards">

            <div class="card_one"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a>
            </div>
            <div class="popupcard_first">
                <div class="circle"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div>
                <div class="textname">Fishnet Chair</div>
                <div class="smalltextname">Seat and back with upholstery made of cold cure foam</div>
            </div>

            <div class="cards center two"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a>
            </div>

            <div class="cards center three"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div>

            <div class="cards edge four"><a href=""><img src="https://maxcdn.icons8.com/Share/icon/Logos//jsfiddle1600.png" alt=""></a></div></div>

CSS

*{
  width 1380px;
}
img[title='arrow'] {
    display: inline;
    width: 9px;
    height: 13px;
}
.featured_cards img{
  width: 270px;
  height: 270px;
}
.featured_cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-right: 98px;
    margin-left: 98px;
    position: relative;
    height: 270px;
    margin-top: 50px;
}

.popupcard_first {
    height: 270px;
    width: 270px;
    position: absolute;
    background-color: white;
    opacity: 0.9;
    display: none;
}

.featured_cards:hover .popupcard_first {
    display: block;
}

.circle {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 24px;
    background-color: #ffffff;
    box-shadow: 0px 2px 4.9px 0.2px rgba(33, 33, 33, 0.35);
    margin: 62px 111px 0px 111px;
}

.circle img {
    margin: 14px 18px;
    width: 12px;
    height: 20px;
}

.textname {
    width: 145px;
    height: 17px;
    object-fit: contain;
    font-family: Montserrat;
    font-size: 21px;
    font-weight: bold;
    line-height: 1.36;
    text-align: center;
    color: #212121;
    margin: 19px 62px 0 63px;
}

.smalltextname {
    width: 206px;
    height: 33px;
    object-fit: contain;
    font-family: Montserrat;
    font-size: 13.9px;
    font-weight: 300;
    line-height: 1.57;
    text-align: center;
    color: #6c6c6c;
    text-align: center;
    margin: 23px 32px 0px 32px;

}

Many thanks

Answer №1

After reviewing the code, I suggest placing the div with the class popupcard_first inside the div with class card_one. This will require the following CSS changes:

CSS:

.popupcard_first {
  height: 270px;
  width: 270px;
  position: absolute;
  top:0px;
  left:0px;
  background-color: white;
  opacity: 0.9;
  display: none;
}
.card_one{
  position:relative;
}
.card_one:hover .popupcard_first {
  display: block;
}

I recommend this approach because when I tested your original code, it led to a flickering issue upon hovering. You can learn more about this problem here: here

The process involves setting all card divs to position: relative, positioning the popover div (popupcard_first) absolutely within its parent div (card_one), and showing the popover only when card_one is hovered.

For a demonstration, you can check out this working demo:

JSFiddle Demo

If you encounter any issues, feel free to reach out to me.

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

Clickable link that directs to a particular tab on a webpage (cbpFWTabs)

I have been utilizing tabs from the codrops Tab Styles Inspiration and I am looking for a way to open specific tabs using URLs. For instance, if I wanted to open tab3, I could link it as www.google.com/index#tab3. Below is the code I am currently using: ...

Styling using CSS is effective only when applied locally, as it does not function properly on GitHub Pages

Although I have come across similar questions to the one I am facing, none of the solutions provided seem to work for me at the moment. My CSS file loads and functions as expected when tested locally, but once I upload it to GitHub, it stops working. In my ...

Is it possible to incorporate a next.js image onto the background design?

I've encountered an issue while attempting to create a fixed background image with a parallax effect using Tailwind CSS and Next.js Image. If you need to see an example of this in action, check out this Template Monster theme. Here's the code s ...

Using VBA to Populate Dropdown List on Webpage from an iFrame

I am facing an issue with my code that aims to interact with a webpage by clicking on a link and then modifying dropdown lists within an Iframe. Specifically, I am attempting to populate the Manufr dropdown list based on data from the Year iFrame using VBA ...

Switch the secondary menu to be the main menu on all pages excluding the homepage in WordPress

I am looking to customize my menu display by showing the primary menu only on my home page (front-page.php) and displaying the secondary menu on all other pages except for the home page. In my functions.php file, I have registered both the primary and sec ...

Centered CSS Box with Pointing Arrow

I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...

What's the process for converting offsetX and offsetY pixel coordinates to percentages?

Currently, I am working on a project where I need the offsetX and offsetY coordinates to be displayed in percentage (%) format while hovering over a div element. By default, these coordinates are shown in pixels. Here is an example of the structure: < ...

The transition between backgrounds is malfunctioning

I want to create a smooth transition effect for changing the background of an element within a setInterval function. Currently, the background changes immediately, but I would like it to transition over a period of time. var act = true; setInterval(func ...

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

Arranging the Logo and hamburger menu for optimal visibility

I am having trouble aligning a CSS hamburger menu next to my logo. I have placed both the CSS hamburger and the logo in the header. Although I was able to float the logo to the right, it is not on the same line as the menu. After the header, I would like ...

Looping through a nested for loop within an HTML table

I am currently working on generating a dynamic table using Lists of varying sizes. My first list is a List of Cars List<Car>. I have successfully placed the names of different car companies in the header. Next, I have a List<List<CarSales>& ...

Trigger submission issue encountered with Jquery in a dialog (modal) window

It's somewhat difficult for me to fully explain my problem. Nevertheless, I'll give it a go. In my HTML code, I have implemented several triggers using Jquery. Trigger 1 is responsible for validating specific items within a form. Once Trigger 1 ...

How can we ensure that the borders of a text field automatically adjust to fit the dimensions of the text field using CSS?

I've encountered an issue with the borders of text fields while working on a project involving CSS/HTML. The problem is that in the browser, the borders appear shorter than the text fields. Initially, I attempted to adjust the border size to match th ...

Conceal certain tables within a container

On my SharePoint page, I have the following HTML structure: <div id="ctl00_PlaceHolderLeftNavBar_ctl02_WebTreeView"> <table cellspacing="0" cellpadding="0" style="border-width:0;"> <table cellspacing="0" cellpadding="0" style="border-width: ...

Types of Content in Solr Responses

My journey with Solr has been enlightening, but I've hit a bump in the road. When querying Solr using: curl "http://localhost:8983/solr/myCollection/select?q=*:*&wt=json&rows=0" I receive a webpage displaying the JSON response. However, the ...

Dynamic input fields with autocomplete functionality

I have attempted to implement the solutions provided elsewhere on this specific issue, but unfortunately they do not seem to be working for me. It is highly probable that I am making some mistake in my approach... My main objective is to achieve what is me ...

Issue with CSS positioning: Struggling to place images outside a div with floating properties

Here is what I need to design along with the code I have written, HTML: <div className='relative mt-64 mb-40 md:h-56 h-36 w-full gradient z-10'> <img className='bg-transparent w-20 h-28 absolute md:top-40 md:lef ...

Designing visual representations using the Canvas elementorGenerating graphic content

I want to design a creative text image where multiple characters come together to form a word, like "The Matrix", within an animated canvas with a matrix effect. The challenge I'm facing is figuring out how to display the text inside the canvas and th ...

Limiting jQuery searches to a specific region: Tips and tricks

If I have the code snippet below: <div class="foo"> <div> some text <div class="bar"> </div> </div> </div> <div class="foo"> <div> some text <div class="bar"> some text </div> </div> </ ...