How can we display an absolutely positioned div when hovering over a card with the help of Tailwind CSS?

I am currently working on a Next.js application with Tailwind CSS. I would like to implement a feature where additional information is displayed when hovering over a product card, similar to the functionality seen on wildberries.ru. I have tried using 'group' and 'group:hover', but I'm facing issues with setting the background for an absolutely positioned div. How can I achieve this effect as shown in the image below?

[

Product Component:

const Product = (props) => {
  return (
    <div className='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
      <div className='relative'>
        {/*Image*/}
        </div>

      <div className='flex flex-col'>
        {/*Price, name, rating*/}
        </div>

      <div className='z-10 hidden absolute group-hover:flex'>
        {/*Displayed on hover: Add to cart button and sizes*/}
        </div>
    </div>
  );
};

export default Product;
cssreactjsnext.jstailwind-csscss-position

Answer №1

however, the issue arises when setting a background for an absolutely positioned div

It appears that no background has been specified for the absolute-positioned <div>. It might be beneficial to assign one like so:

<div className='z-10 hidden absolute bg-white group-hover:flex'>


<script src="https://cdn.tailwindcss.com"></script>

<div class="grid grid-cols-2">
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </div>
  </div>
  <div class='group rounded-md space-y-1 hover:bg-white hover:shadow-lg'>
    <div class='relative'>
      {/*Image*/}
    </div>

    <div class='flex flex-col'>
      {/*Price, name, rating*/}
    </div>

    <div class='z-10 hidden absolute bg-white group-hover:flex'>
      {/*Must be shown when hover, Add to cart button and sizes*/}
    </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

Update to the viewport meta tag in iOS 7

Anyone experiencing problems with the viewport tag after updating to iOS7? I've noticed a white margin on the right side of some sites. Adjusting the initial scale to 0.1 fixed it for iPhone but made it tiny on iPad 3, which is expected due to the low ...

javascripthtmlioscssmobile-safari

Why does Popover in Material-UI hide the backdrop of the Modal?

It's puzzling why Popovers are set to have an invisible backdrop by default, with no apparent way to change it. Is there a key concept in Material Design that I'm overlooking? Should I raise this concern as an issue? <Modal container ...

reactjsmodal-dialogmaterial-uimaterial-designpopover

What is the best way to display a responsive website design exclusively for certain devices?

My website currently lacks responsiveness. Typically, we can check if a website is responsive by resizing the browser to see if it adjusts using CSS3 media queries. However, I am looking to create a better user experience by ensuring that visitors using a ...

htmlcssresponsive-designweb-deployment

A grid layout in Material UI with less than 12 columns

For my grid layout, I am looking to create columns that are separate into 10 instead of the standard 12. While I have been able to find information on increasing the number of default columns online, decreasing them has proven to be a challenge. Is it not ...

reactjsmaterial-ui

A more efficient method for tallying values within an object (JavaScript, React)

Is there a more efficient way to determine the count of items with a specific key/value pair in a React state? When the list is large, this method may become a bottleneck. To illustrate the question, consider the following simplified example: class App ...

javascriptarraysobjectreactjs

ImageMapster for perfect alignment

I'm struggling with centering a div that contains an image using imagemapster. When I remove the JS code, the div centers perfectly fine, indicating that the issue lies with the image mapster implementation. It's a simple setup: <div class=" ...

javascriptjqueryhtmlcss

Tips for handling promises in Next.js while using a forEach loop

I'm encountering an issue with ensuring that the foreach data is resolved before passing it to DrawChart(); After passing it to DrawChart(), the applicationName is consistently undefined. Is there a way I could prevent it from being undefined? useEff ...

next.jsnext.js13

Changing the navigation bar's position from fixed to static while scrolling using Bootstrap

I am attempting to keep the navbar at the top by setting a fixed position with 'top: 0' on scroll for navbar-default, and return the navbar to its original position when scrolling up (to top 300). Below is my code: var height = jQuery('.n ...

jquerytwitter-bootstrapcss

What is the best way to make three divs that can be adjusted in size?

Desired Layout: | A | | B | | C | ^ ^ Adjustment Behavior: | A | | B | | C | Current Issue: | A | C | I attempted to enhance the functionality by modifying the provided JavaScript cod ...

javascriptjqueryhtmlcss

How can I combine multiple styles using Material-UI themes in TypeScript?

There are two different styles implementations in my code. The first one is located in global.ts: const globalStyles = (theme: Theme) => { return { g: { marginRight: theme.spacing(40), }, } } export const mergedStyle = (params: any) ...

javascriptreactjstypescriptmaterial-uithemes

The overflow property is not functioning as anticipated

I've browsed Google and this site, but I couldn't find a solution to my issue. On my webpage, I have a shoutbox and a teamspeak viewer with a specific height for the outer div. The scrollbars don't look good on our new design, so I attempt ...

htmlcssscrollbaroverflow

Attempting to set up node-sass through npm

Encountering an error while trying to install node-sass via npm at any version has left me puzzled. I've gone through several troubleshooting steps: updating node-sass to the latest version updating all dependencies and adjusting webpack.config.js a ...

reactjsnpmwebpackpackage.jsonnode-sass

Cannot call setState because it is not recognized as a function

Exploring the world of react-native and experimenting with coding, I encountered this error: _this.setState is not a funtion.(In '_this.setState({myState: createSignature()})','_this.setState' is undefined) When routing to my about ...

reactjsreact-native

Hiding column headers in a Material UI table can be achieved by customizing

I am dealing with a set of material ui table headers const columns = [ { id: 'id', label: 'ID', hide: true}, { id: 'username', label: 'User Name', }, { id: 'fullname', label: 'Full Name&apo ...

reactjsmaterial-uimui-datatable

Exploring the possibility of utilizing the talks.js library to develop a chat feature within a React application

I'm currently working on integrating the talks.js library to set up a chat feature in my React project. I've followed all the instructions provided at , but unfortunately, it's not functioning as expected. I'm not quite sure what I migh ...

javascriptreactjschat

Dealing with memory leaks in React's componentWillMount

I recently came across a video that discussed how the componentWillMount method can potentially lead to memory leaks. The video can be found here: https://www.youtube.com/watch?v=Fgd2ivSnXXo In order to test this theory, I checked for listeners using con ...

reactjsmemory-leaks

Expanding the size of a text area input within a form using CSS and

How can I adjust the size of the text area in the Comment section to match the full width of the section, starting from the beginning instead of the middle? You can find the code here. HTML <body bgcolor="#00BCD4"> <div> <h1>Co ...

htmlcssformstextareawindow-resize

Increase the spacing within div columns containing rows of uniform height

Is there a way to add some extra space between the H3-1 div and the H3-2 div? Ideally, I would like to achieve this without using custom CSS, but if necessary, that's okay too. I'd prefer to stick with the col-sm-6 class instead of using col-sm ...

htmlcssbootstrap-4

Ways to incorporate a reverse transition effect

I am encountering an issue with a sliding effect on a div. When it has a class hddn, the overlay will have right: -100% from the viewport. However, when the hddn class is removed, it should return to the viewport with right: 0. How can I animate this movem ...

htmlcss

Is it possible to turn off the shadow on just one side?

Is there a way to remove the shadow in the red area below? I have come across similar questions but unsure how to implement those solutions here. Live Demo: http://jsfiddle.net/xFa9M/ CSS:- #list li{ border: 2px solid black; border-top-width: 1px; borde ...

htmlcss