How to make a div disappear when hovered using Tailwind CSS

I need help with my code that is not working as expected. I have a set of images displayed as cards, each with text below them. I am trying to hide the text and only show the image using Tailwind v2, but I can't seem to get it right. Here's my code:

<div class="group max-w-sm bg-white m-4 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg w-full h-64 object-cover" src="images/care.webp" alt="" />
                        </a>
                        <div class="p-1 visible group-hover:invisible">
                            <p class="visible group-hover:invisible text-center mb-3 font-normal text-gray-700 dark:text-gray-400">CARE</p>
                            </a>
                        </div>
                    </div>
                    <!-- end of card -->
            
                    <!-- Card -->
                    <div class="group max-w-sm bg-white m-4 rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
                        <a href="#">
                            <img class="rounded-t-lg w-full h-64 object-cover" src="images/kindness.jpg" alt="" />
                        </a>
                        <div class="p-1 invisible group-hover:visible">
                            <p class="invisible group-hover:visible text-center mb-3 font-normal text-gray-700 dark:text-gray-400">KINDNESS</p>
                            </a>
                        </div>
                    </div>

If you have any advice or recommendations on what I might be doing wrong, please let me know. I've checked the documentation and also looked at some solutions on Stack Overflow with no success.

htmlcsstailwind-css

Answer №1

found in the documentation link towards the end is the following code snippet

// tailwind.config.js
  module.exports = {
    variants: {
      extend: {
        // ...
       visibility: ['hover', 'focus'],
      }
    }
  }

you need to include these settings in your tailwind.config.js file for it to function properly
and apply these classes visible hover:invisible

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

Is there a way to show a progress bar that functions as the background for a table row

My table is structured as follows: th1 th2 th3 th4 th5 th6 td1 td2 td3 td4 td5 td6 td1 td2 td3 td4 td5 td6 I am looking to incorporate a feature where new rows are dynamically added using a form that triggers ...

javascripthtmlcssajaxhtml-table

Is there a way to automate the uploading of captcha images to this solving service using Python?

Currently, I am working on a Python program with the goal of solving captchas on a website. My plan is to integrate 2captcha into the solution. Using Selenium, I have managed to write a Python script that fulfills all required tasks except for solving the ...

pythonhtmlseleniumselenium-webdriver2captcha

Animated mosaic pattern menu design

Is there a way to achieve this effect with a sketch? Note: I would like to add hover animation to the borders if possible. I attempted to do it using the following code: clip-path: polygon(0 0, 100% 0, 92% 86%, 6% 100%); However, the shapes created by ...

javascriptjqueryhtmlcsssvg

Maintain the aspect ratio of a div with CSS styling

Attempting to create a div while maintaining a 16:9 aspect ratio using CSS led me to conduct a Google search. Fortunately, I stumbled upon a helpful resource on Stack Overflow that detailed how to achieve this: How to maintain the aspect ratio. Excited to ...

htmlcss

Change the font style of individual characters within a string using CSS or JavaScript, instead of applying it to the entire

Is it feasible to assign a specific font to a particular character? I would like: #test_id{ font-family: "digitalfont"; font-family-of-, : "HelveticaNeue-Light"; } In order to set a font for a comma and a separate font for the rest, do I need to ...

htmlcssfonts

What is the process for adding a box shadow beneath my header?

I am currently attempting to add a box shadow under my header, similar to the design featured in the project mockup at https://github.com/RaghavMangrola/the-brighton-times. After trying to implement the following CSS property and value: .header { ...

css

Populate a form with data retrieved from a MySQL query result

One aspect of my project involves a specific interface called 'designation.php' that contains a form. The goal is for users to enter a 'designation code' (which serves as the primary key) and then click the 'update' button, pr ...

phphtmlmysqlajax

Hiding loading spinner in Ionic 2 upon iframe completion

I need to embed an external webpage in my app using an iframe. I have successfully implemented a loading animation while the iframe is loading, but I am unsure how to hide the animation once the iframe content has loaded. Unfortunately, I am unable to edit ...

htmlangulariframetypescriptionic-framework

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax

Identify the Presence of Hover Functionality

For a while now, the trend has been leaning towards feature detection. I am interested in determining whether a visitor's browser supports the :hover pseudo class. With many mobile devices not supporting hovering, I want to adjust my event listeners a ...

javascriptjquerycss

What is the best approach to retain a user's selection for dark mode?

I have created a small website to showcase my work, but I'm struggling to figure out how to make the website remember a user's choice of dark mode. After searching on Stack Overflow, I came across suggestions like using cookies or localStorage. ...

javascripthtmlcss

How can I extract the text within a Span tag using Selenium WebDriver?

Is there a way to retrieve the text from a span tag and print it using Selenium Webdriver? I am looking to extract the text UPS Overnight - Free The HTML code is as follows: div id="customSelect_3" class="select_wrapper">> <div class="select ...

javahtmlseleniumselenium-webdriver

Is there a technique I could use to create a visual effect like zooming, but without altering the dimensions of the image?

I'm currently working on a project to develop a photo gallery. let img = document.createElement('img') img.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikipedia_logo_%28svg%29.svg/1250px-Wikipedia_logo_%28svg% ...

javascripthtmlcss

Animating ng-switch transitions within a div element

Utilizing bootstrap 3 panel along with ng-switch for a sliding animation: Check out the Plunker here I am facing an issue where the animation extends past the borders of the panel instead of staying within it. How can I fix this in my Plunker? The desire ...

cssangularjscss-transitionstwitter-bootstrap-3

Issues with React JS and JavaScript filtering functionality not working correctly

I've been working on implementing a filter feature for a website, using an HTML range slider. However, I've encountered an issue where the values only update correctly when decreasing. For example, if I set the slider to $500, only products that ...

javascripthtmlreactjs

Accordion section appears on the webpage as it is loaded

I am currently working on implementing an accordion feature for my webpage. Everything is functioning correctly when I click the button, but there is one issue - the div opens automatically when the page loads. My goal is to have the div closed initially a ...

javascriptjqueryhtmlcssangularjs

Tips for Creating an Animated Progress Bar in a Slider

After implementing jQuery, I managed to create a unique slider on my website. This slider included a thumbnail with captions for each photo. Positioned below the thumbnail was a progress bar fixed in the center between the caption and the image. Users can ...

javascriptjqueryhtmlcss

How can I connect the playback speed of an HTML5 video element with Vue.js?

Is it possible to bind the playbackRate of an HTML5 video element without using getElementById in Vue.js? //Example of directly manipulating playbackRate with plain javascript var vid = document.getElementById("myVideo"); vid.playbackRate = 0.5; ...

htmlvideovue.js

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

Animation that responds to scrolling movements

Is there a way to animate text based on scrolling? <p class="class">TEXT</p> transform:translateX(-500px);opacity:0; transform:translateX(0px);opacity:1; ...

javascripthtmlcss