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

Personalized color scheme for calendar td

I am facing an issue with my event calendar where I want to change the background color of td. I came across a helpful solution in this question, but it did not fully solve my problem. When I implemented the following jquery: $('[class*="fc"]'). ...

jqueryhtmlcsscalendar

The positioning of the <thead> element does not seem to be functioning properly

I attempted to create a background for the header (thead) using a pseudo element (:after) because I wanted the background to span from one edge to another edge (including both left and right side padding). However, thead is not taking a relative position a ...

htmlcsscss-position

When trying to use routes with the .map() function, it does not seem

I am currently working on developing a multi-page web application using react-router-dom. However, I have encountered an issue with the user list page (userlist.js) where the data inside the .map() function is not being returned. Interestingly, the code pr ...

javascriptreactjsexpress

React Auth0 user loses authentication status when navigating away from initial login page

I am facing an issue with my React app which utilizes the auth0-react package and the useAuth0 hook. When I test it in my local environment using Auth0 dev keys, everything works fine - I can log in and out, and the session persists without any problems. ...

reactjsauth0

Having trouble setting up React-Native project configuration

As a beginner in React-Native, I am currently working on setting up the project on my Mac. Although I successfully created a new project, I am facing challenges with setting up an existing one using WebStorm IDE. I have been trying to do so for a week now ...

reactjsreact-nativewebstormreactive-programmingreact-native-ios

REACT - Infinite looping caused by hooks

Hello, I'm encountering an issue with hooks. Here is the code snippet that's causing the problem: export default function Checkout() { const { readRemoteFile } = usePapaParse(); const [parsedCsvData, setParsedCsvData] = useState([]); ...

reactjsreact-hooks

'alertVisible' is displaying an error message stating that "Objects are not appropriate as React children"

Currently encountering an issue while using react-alert. The error message states: Error: Objects are not valid as a React Child (found: object with keys {$$typeof, render}). If you meant to render a collection of children, use an array instead. in Unk ...

reactjs

Tips for successfully passing a variable in Gatsby's GraphQL system

I am trying to display multiple images using the relative path of each image that is passed as a prop to the component. Below is my code snippet: import Img from "gatsby-image"; import {useStaticQuery, graphql } from "gatsby"; const Tea ...

reactjsgraphqlgatsbygatsby-image

Prop type validation failed: Material-UI requires either the `children`, `image`, `src`, or `component` prop to be specified in ForwardRef(CardMedia). Please make sure to provide

Every time I attempt to post a new Scream on my page, the image, title, and content of the card are not displaying until after I refresh the page. It is showing failed prop types error message indicating that values from prop types are not being obtained i ...

reactjsmaterial-ui

Displaying mysqli results within a div while incorporating an onclick event for a javascript function that also includes another onclick event for a separate javascript function

I'm struggling to figure out the correct way to write this script. Can someone please guide me in the right direction or suggest an alternative method? I've searched but haven't found any relevant examples. I am fetching information from a ...

javascriptphpcssmysqlajax

Tips for Navigating and Scrolling to an Element by its ID in a Next.js Page Enhanced with AnimatePresence

Currently, I am utilizing Framer Motion to add animations to the page transitions in a Next.js project. However, when implementing AnimatePresence, it seems to interfere with the navigation to specific elements using hash links (id). The seamless transitio ...

javascriptreactjsscrollnext.jsframer-motion

Issues with jQuery Slider not functioning properly within asp.net webform

I have implemented an Awkward slider to display images for my article. I made some CSS modifications to change the design and it worked perfectly fine when used on an HTML page. However, when I tried using it with an ASP.NET web form, it failed to work fo ...

jqueryasp.nethtmlcssjquery-slider

Tips for extracting the index of the chosen item from a dropdown using ReactJs and Material UI

This is the code snippet for Dropdown component implementation: <DropDownField name={formElement.name} label={formElement.name} value={formik.values[formElement.name] || ''} dropDownItems={formElement.name === &apo ...

javascriptreactjsmaterial-uifrontend

How to make your divs stand out using Bootstrap

Can anyone assist me in aligning my divs based on the example below? Here is what I have achieved so far: I am struggling to apply spacing between the two divs, and they are not of equal height. My HTML: <div class="container - fluid"> ...

htmlcsstwitter-bootstrapgrid

Is the original object cloned or passed by reference when passing it to a child React component through props?

When passing an object to a child component through the components props in React, does the object get cloned or does it simply pass a reference to the original object? For instance, in my App.js, I am importing a JSON object called ENTRY_DATA. Then, I pa ...

javascriptreactjs

The network socket connection for the Netlify Apollo NextJS SSR client was disconnected before a secure TLS connection could be established

I've developed an application using NextJS that is currently hosted on Netlify. The API, which is a NestJS project running GraphQL, is hosted on Heroku. While in local development mode, all my SSR pages work flawlessly. However, when transitioning to ...

sslherokugraphqlnext.jsapollo-client

Tips for securely passing props based on conditions to a functional component in React

I came across this situation: const enum Tag { Friday: 'Friday', Planning: 'Planning' } type Props = { tag: Tag, // tour: (location: string) => void, // time: (date: Date) => void, } const Child: React.FC<Props> = ...

reactjstypescriptgenericsoverloading

Having trouble getting a React Hook to function properly in NextJS with TypeScript. Let's troubleshoot

I'm currently utilizing NextJS to showcase information fetched from a database in a table format. After retrieving the data, my intention is to leverage the map function to generate table rows and then incorporate them into the table. import React, {u ...

reactjstypescriptnext.js

Transform information from an array that consists of nested arrays to be utilized within a component

Recently, I retrieved a bulk of data from an API located at My goal is to integrate the coordinates into a React Leaflet component that can showcase markers on a map. <Marker position={[LAT, LON]} /> The data provided below contains coordinates as ...

reactjsreact-leaflet

Implement CSS to globally style material.angular's mat-card by customizing the background color

Looking for a way to globally change the background of mat-card on material.angular.io. I attempted adding the following code snippet to styles.css with no success. mat-card { background-color: purple; } ...

cssangularangular-material