Having trouble incorporating transitions into the hover effect

Currently, I am working on a project using React and Tailwindcss. The issue I am facing involves creating a card with shadowed text that only appears when hovered over an image. I want to make the hover effect smoother by adding a transition class, but I am struggling to implement it correctly. Can anyone provide guidance on where exactly I should apply the transition class in my code?

Below is the snippet of my code:

<div className="group relative grid w-80 h-full flex-col items-end justify-center overflow-hidden rounded-4xl text-center">
              <div className="absolute h-full w-full overflow-hidden bg-cardBg bg-cover bg-center">
                <div className="hidden group-hover:block cursor-pointer w-full h-full to-bg-black-10 bg-gradient-to-t from-black/70 via-black/20"></div>
              </div>

              <div className="hidden group-hover:block cursor-pointer relative p-6 px-6">
                <h2 className="mb-6 block text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
                  Shadowed Text Bla Bla Bla
                </h2>
              </div>
            </div>

I'm looking to achieve a seamless and smooth hover effect for the text. Any suggestions or tips would be greatly appreciated.

cssreactjstailwind-css

Answer №1

Changes in display values cannot be transitioned between. To achieve a fade effect, you can use opacity: 0 instead of display: none, and opacity: 1 instead of display: block. Replace hidden with opacity-0 and group-hover:block with group-hover:opacity-100. Make sure to add a transition property as well, such as the following:

tailwind.config = {
  theme: {
    extend: {
      backgroundImage: {
        cardBg: 'url(https://picsum.photos/1000/1000)',
      },
    },
  },
};
<script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="h-80">
  <div class="group relative grid w-80 h-full flex-col items-end justify-center overflow-hidden rounded-4xl text-center">
    <div class="absolute h-full w-full overflow-hidden bg-cardBg bg-cover bg-center">
      <div class="opacity-0 group-hover:opacity-100 cursor-pointer w-full h-full to-bg-black-10 bg-gradient-to-t from-black/70 via-black/20 transition"></div>
    </div>

    <div class="opacity-0 group-hover:opacity-100 cursor-pointer relative p-6 px-6 transition">
      <h2 class="mb-6 block text-4xl font-medium leading-[1.5] tracking-normal text-white antialiased">
        Shadowed Text Bla Bla Bla
      </h2>
    </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

In landscape mode on Safari for iOS, the final item in a vertical flexbox may be cut off

Describing my app: It is structured as a 3-row flexbox column. <div class="app" style="display: -webkit-flex; -webkit-flex-direction: column; -webkit-justify-content: space-around;"> <div class="question-header" style="-webkit-flex: 0 0 0;"&g ...

htmlioscsssafariflexbox

What's the trick to ensuring that state is set with useEffect() every time the page is refreshed?

Hey there! I've got some code that's pretty straightforward and not too complicated, so please take a moment to read through it. (I'm using React with Next.js) First off, in the root file app.js, there's a useEffect function that fetch ...

reactjsnext.jsuse-effectuse-stateasynchronous-javascript

`Turn nested JSON into a formatted list using jquery`

I am currently facing two challenges: I am having trouble with the HTML structure, as shown in the image below Current HTML structure: https://i.stack.imgur.com/GH46J.png Desired HTML structure: https://i.stack.imgur.com/Dq3Gn.png How can I create d ...

javascriptjqueryhtmlcssjson

Disabling the ripple effect on the primary action in React Material lists: A Step-by-Step

I was attempting to include two action buttons at the opposite ends of a list component. https://i.stack.imgur.com/juv8F.gif When clicking on the secondary action (delete icon on the right), the ripple effect is confined to just the icon. On the othe ...

javascriptcssreactjsmaterial-uimakestyles

What is the rationale behind excluding the constructor in the Time Travel section of the ReactJS tutorial?

As stated in this particular tutorial: The next step is to pass the squares and onClick props from the Game component to the Board component. With a single click handler in Board for multiple Squares, we need to include the location of each Square in the ...

reactjs

The relative pathway is functional for displaying images in the CSS file, however, it does not work in the

Okay, I am going to rewrite this... I am currently working on a project that consists of two layers. The top layer involves HTML5 animations such as rollovers and slides, while the bottom layer features kaleidoscope animation using images and CSS. The is ...

javascriptcsshtmlrelative-path

What is the best way to align content within a div to match the alignment of content outside of it using bootstrap?

I have a section that stretches across the width of the screen, but the text inside is contained within a container and aligns correctly. Below that section is a two-column layout, and I'm trying to align the text in the left column with the text abo ...

htmltwitter-bootstrapcssbootstrap-4

Utilizing HTML and CSS allows for creating a responsive layout with three elements such as this

Need help with CSS to align three elements in a row, where the first two are on the left and the third is on the right. The layout should adjust so that when the window size is smaller, the second element moves below the first while the third element stays ...

htmlcssresponsive-design

Creating a fluid grid layout using CSS that consists of just two cells that adjust

Is it possible to design a flexible CSS grid layout with two cells that can switch between stacking vertically or horizontally to maximize the area of the second cell? (or similar heuristic) Vertical Layout Horizontal Layout Ideally, the menu cell shoul ...

htmlcssresponsive-designresponsivecss-grid

Displaying a constant variable in JSX after submitting a form

Exploring Next.js further, I've set out to create a website that functions similar to Tinyurl by shortening long URLs. However, I've hit a roadblock when it comes to displaying the shortened URL. My approach involves using a form where submitting ...

reactjsnext.jsformikyup

Issues with alignment in Firefox

My table alignment is off in Firefox but looks fine in Chrome and IE. Do I need to add an "FF Fix" for this issue? In Chrome/IE, the little dot in the bottom right corner of each cell appears correctly, but in Firefox it seems to be misplaced in the top r ...

htmlcssalignment

Ways to customize the context menu in monaco editor

Looking to customize the default context menu with a new CSS style, but running into difficulties since the classes are closed when out of focus. If anyone has insight on the classes or how to modify the style using JavaScript, your assistance would be g ...

reactjsmonaco-editor

How can I implement a hover-over image change effect similar to the one seen in Gmail accounts?

I am attempting to implement a feature that allows users to change their image, similar to what can be done in a GMail account. When the user hovers over the image, an option to "change image" should appear. This may be a new concept for me because I am ...

javascripthtmlcss

Discover which dependency has changed with the React useEffect hook

I'm encountering an issue with the useEffect hook where I want a conditional statement inside the callback to run only when a specific dependency is changed. Here's an example: const [index, setIndex] = React.useState(3); const [dep, setDep] = Re ...

reactjsreact-hooks

Modify the background color of four results with the help of PHP

With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...

phpcssbackground-color

Ways to move the cursor to the search field after the placeholder text

I'm working on a Vue project with a small app featuring an input type search. The issue I'm facing is that the cursor appears at the beginning of the input, whereas I want it to appear after the placeholder text. How can I make this adjustment? ...

htmlcssvue.js

Tips for centering heading <h1> on the webpage

I am trying to align either <h1> or <div class="heading"> in the center of my webpage. The method I have attempted involves body { text-align: center; } However, I am puzzled as to why this approach is not yielding the desired result. I utili ...

htmlcss

Retrieve data from the redux store within the components nested under redux-simple-router

I am currently working on finding a way to access the redux store within a route in order to dispatch actions directly from that location. Below is an example of how my main Component is structured: class App extends Component { render() { return ( ...

javascriptnode.jsreactjsreduxreact-router-redux

Create a simulation of window.scrollTo in React, similar to preventDefault(), with Jest and Enzyme

I'm currently working on a simple test case that verifies the click of an onSubmit button and checks if preventDefault() is triggered. While this part is functioning correctly, I've encountered difficulty in testing window.scrollTo(). Could some ...

javascriptreactjsreact-nativejestjsenzyme

Applying CSS styles exclusively to a div element and not its before pseudo-class

So I'm working on an HTML page with a div that looks like this: <div class="get-this"> blah blah </div> I've added a before pseudo-element to the div and now I want to apply a CSS style specifically to the div, not including the pse ...

htmlcss