Hover delay effect using Tailwind CSS

I'm facing an issue where text appears when someone hovers over a group, causing a dizzy feeling due to auto formatting during resize. I'd like to delay the text from showing up until the resize is complete. Is there a way to achieve this without using JS in a 100% tailwind manner?

<div class="flex flex-row h-screen bg-white">
        <div class="group justify-center flex items-center hover:grayscale min-h-full transition-width transform delay-200 duration-500 bg-black xl:hover:w-3/4 w-full md:w-1/2 lg:w-1/3 xl:w-1/4" style="background-image:url('https://64.media.tumblr.com/68695898ecdfe0aec572b7c008def47f/1bbd6bfe09e82b49-4b/s1280x1920/27ddc6b47bd3b099920371ea489b6328965a868d.jpg'); background-size: cover; background-position:center;">
            <div class="justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-full shadow-2xl text-white text-center font-medium"  style="background-color: rgba(0,0,0,0.3);">
                <div class="invisible md:visible font-logo opacity-80 justify-center font-black content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                    profiles
                </div>
                <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                    Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.
                </div>
            </div>
        </div>
        
        <!-- More similar code blocks with different images and text here -->
        
    </div>
htmlcsstailwind-css

Answer №1

To implement a div with the following class: 

opacity-0 group-hover:hover:opacity-100 min-h-full transition duration-300 delay-500 flex items-center

you can code it like so:

   <div class="justify-center content-between min-h-full w-full flex items-center text-3xl uppercase bg-gray-900 h-full text-white text-center font-medium" style="background-color: rgba(0,0,0,0.3);">
                    <div class="font-logo opacity-80 justify-center content-between w-full flex items-center text-3xl uppercase bg-gray-900 h-24 shadow-3xl text-white text-center font-medium group-hover:hidden">
                        photos & videos
                    </div>
                    <div class="font-logo hidden group-hover:flex justify-center content-between w-full h-full items-center text-white text-center font-medium p-2" style="background-color: rgba(0,0,0,0.6);">
                      <div class="opacity-0 group-hover:hover:opacity-100 min-h-full transition duration-300 delay-500 flex items-center">Bicycle rights salvia jean shorts glossier portland subway tile copper mug everyday carry photo booth hashtag kale chips taxidermy street art lo-fi church-key.</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

Extension for Chrome that switches between active and inactive modes

I have been attempting to create an extension that can toggle the functionality of another specific extension on and off. Despite numerous attempts, I have not been able to find a solution that works effectively. Essentially, my extension displays a popup ...

javascripthtmlgoogle-chromegoogle-chrome-extensiontoggle

Unable to showcase array JSON values on HTML using ng-model

Utilizing ngTagInput for autocomplete textbox and successfully receiving suggestions. To display the values of data-ng-model (named "list") I am using: {{list}} and it is showing correctly. However, when selecting "list1", the display appears as: [{"lis ...

javascripthtmljsonangularjs

iPhone 3GS and 4 not expanding DIVs by 100%

I've been encountering a significant issue with a div that's set to 100%. It displays properly on desktop screens, but on iPhones, there appears to be a gap on the right side. I've attempted to use the following CSS: body { min-width:980p ...

jqueryhtmlioscsswidth

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

javascripthtmljsonvue.js

The makeSVG function from GoJS is failing to generate the correct HTML SVG object

I have been utilizing the Diagram.makeSVG() method to create an SVG from my diagram. Subsequently, I appended the SVG to a new empty tab using this script (diagram represents my Diagram Object): function print() { var newTab = window.open(), svg ...

javascripthtmlinternet-explorersvggojs

What is the best way to continuously loop an image from left to right and right to left indefinitely using JavaScript?

As part of the challenge, I am tasked with creating a Pacman game using HTML, CSS, and JavaScript. One key aspect is to control the movement of the ghosts throughout the game. However, I am facing an issue with the current function that controls the ghost& ...

javascripthtmlcss

Is there a workaround for retrieving a value when using .css('top') in IE and Safari, which defaults to 'auto' if no explicit top value is set?

My [element] is positioned absolutely with a left property set to -9999px in the CSS. The top property has not been set intentionally to keep the element in the DOM but out of the document flow. Upon calling [element].css('top') in jQuery, Firef ...

javascriptjquerycss

Tips for toggling the visibility of a revolution slider based on current time using JavaScript

Currently, I am integrating the revolution slider into my WordPress website. My goal is to have the slider change according to the standard time of day. For instance, I want slider1 to display in the morning, slider2 at noon, slider3 in the evening, and sl ...

javascriptcsswordpressslider

Firefox experiencing problem with retrieving video.duration in HTML5

I am currently working on developing a unique video player from scratch. <video preload="metadata" id="videoPlayer" style="width: 640px; height: 360px;"> </video> <script type="text/javascript"> var v = ""; var myV ...

jqueryhtmlfirefoxmedia-playerhtml5-video

Excessive width of the lower border

I have a dropdown menu on my website and I wanted to add a border-bottom to the menu. However, the border appears too wide. I went through every step of this solution as it seemed like the same problem, but nothing seems to be working. It would be great i ...

htmlcss

The absence of a closing parentheses in the argument is causing an issue when rendering

Apologies for the basic mistake, but I could really use some assistance with this syntax error. I've spent over an hour searching for it and still haven't been able to locate the issue. It seems to be around the success function(data) section. Th ...

javascriptjqueryhtmlajax

Significant distance between the content and the footer section of the page

Having trouble with a large gap between the content and footer ad on my website. I've tried to troubleshoot it myself, but suspect the issue may be related to the content generated by another site (indeed.com). Check out the link here: Any assistanc ...

csshtml

Troubleshooting problems with Bootstrap datepicker in a Vue project

I am facing a problem with the b-datepicker feature while trying to select a date. The dates are not appearing correctly, as shown in the image linked below. Here is my code: <b-form-group class="my-3" > <b-input-group> ...

htmlvue.jswebbootstrap-4buefy

Utilizing Ant Design Icons without an Internet Connection

In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation ...

cssreactjsantdoffline-mode

Using the ico-moon icon in an HTML email for various email clients such as Outlook and Gmail

I would greatly appreciate it if someone could provide instructions on how to incorporate ico-moon icons into an email HTML, ensuring they can be properly displayed in various email clients such as Outlook and Gmail. ...

htmlcssiconshtml-email

Issues with radio buttons not functioning or being able to be selected in Internet Explorer

My radio buttons are functioning perfectly in Chrome, Firefox, and Safari, but for some reason, they are not selectable in Internet Explorer (Version 7). Any suggestions on how I can resolve this issue? HTML: <label> <input type="radio" name ...

htmlcssinternet-explorerradio-button

When a page is changed, the Vue.js Active Menu color remains enabled

Check out my website at . I want to customize the navigation bar so that only the active page's navbar li is colored in red. <div class="navigation-items"> <ul class="nav-list"> <li class="nav-item"><nuxt-link to="/en" ...

javascriptcsstwitter-bootstrapvue.jsnuxt.js

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

javascripthtmlcssfor-loopprogress-bar

Achieving a seamless integration of a navbar and video in Bootstrap 5.3: tips and tricks

I'm updating a website design using Bootstrap and I want to create a navbar with a video playing in the background. To ensure that the navbar stays fixed at the top while scrolling, I made it sticky. After testing various methods, I managed to posit ...

htmlcssbootstrap-5