Issue with transition effect not functioning properly when hovering in HTML and CSS

Is there a way to achieve a slow smooth transition when hovering over the .bg-gradient element and have the same effect when removing the cursor? Currently, the transition happens quickly on hover.

.asc {
  height: 500px;
  background-position: 50%;
  background-size: cover;
  position: relative;
}

.bg-gradient:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(transparent, rgba(0 0 0 / 0.8) 50%);
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

.bg-gradient:hover {
  transition-duration: 2s;
  background: transparent;
}

.text-center {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
}
<section class="prt-row">
  <div class="container">
    <div class="row">
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/available.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">AVAILABLE</h2>
          </div>
        </div>
      </div>
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/sold.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">SOLD</h2>
          </div>
        </div>
      </div>
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/compare.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">COMPARE</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcssbackgroundhovercss-transitions

Answer №1

There may be some confusion surrounding whether the transition should apply to the actual element or a pseudo element.

This code snippet assumes it's the element that needs transitioning, but you might want to consider using a pseudo element for this effect since it's purely visual.

.asc {
  height: 500px;
  background-position: 50%;
  background-size: cover;
  position: relative;
}

.bg-gradient {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient( transparent, rgba(0 0 0 / 0.80) 50%);
  transition: all 2s ease-in-out;
  -webkit-transition: all 2s ease-in-out;
  opacity: 1;
}

.bg-gradient:hover {
  transition-duration: 2s;
  opacity: 0;
}

.text-center {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-weight: bold;
}
<section class="prt-row">
  <div class="container">
    <div class="row">
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/available.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">AVAILABLE</h2>
          </div>
        </div>
      </div>
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/sold.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">SOLD</h2>
          </div>
        </div>
      </div>
      <div class="col-md-4 p-1">
        <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/compare.webp');">
          <div class="bg-gradient">
            <h2 class="text-center text-white">COMPARE</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer №2

Regrettably, full support for gradient transitions is not available at this time. However, we can work around this issue by emulating the desired result through adjustments to other properties.

Firstly, it's important to correct the selector you utilized, changing it from:

.bg-gradient:before

To:

.bg-gradient::before

Additionally, the hover effect needs to be corrected as well, as the effects should be applied to the pseudo-element instead of directly on the element itself. From:

.bg-gradient:hover

To:

.bg-gradient:hover::before

Next, we introduce opacity to the pseudo-element.

.bg-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0 0 0 / 0.8) 50%);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    opacity: 0.8;
  }
  
  .bg-gradient:hover::before {
    transition-duration: 2s;
    opacity: 0;
  }

Finally, you just need to adjust the transition duration to achieve the desired animation.

Complete code snippet:

.asc {
    height: 500px;
    background-position: 50%;
    background-size: cover;
    position: relative;
  }

  .bg-gradient::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(0 0 0 / 0.8) 50%);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    opacity: 0.8;
  }

  .bg-gradient:hover::before {
    transition-duration: 2s;
    opacity: 0;
  }

  .text-center {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    font-weight: bold;
  }
<section class="prt-row">
        <div class="container">
          <div class="row">
            <div class="col-md-4 p-1">
              <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/available.webp');">
                <div class="bg-gradient">
                  <h2 class="text-center text-white">AVAILABLE</h2>
                </div>
              </div>
            </div>
            <div class="col-md-4 p-1">
              <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/sold.webp');">
                <div class="bg-gradient">
                  <h2 class="text-center text-white">SOLD</h2>
                </div>
              </div>
            </div>
            <div class="col-md-4 p-1">
              <div class="asc" style="background-image: url('https://f1rst-motors.s3.me-central-1.amazonaws.com/static/compare.webp');">
                <div class="bg-gradient">
                  <h2 class="text-center text-white">COMPARE</h2>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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

Upon loading a website, the Chrome browser will automatically set the zoom level to 80%

Recently, I've encountered a perplexing issue with Chrome where my website is automatically zoomed out from 100% to 80%. It seems that browsers cache zoom settings based on the domain and apply them when users revisit the site. However, in this case, ...

htmlangulargoogle-chromefirefoxbrowser

Changing the width of an SVG path from 0 to 100% using CSS

I have an SVG design of wires that I want to animate the width from "0 to 100%", but I'm having trouble achieving this effect. It's easy to do with a div element, but not with an SVG image. Below is my code snippet: svg path { animation: f ...

htmlcssanimationsvgcss-animations

Items that share identical height and margin values will appear with divergent visual presentations

I am trying to align three horizontal lines so that they are the same height and have an equal spacing between each other. However, due to variations in height and margins, some lines appear larger or smaller than others. How can I ensure they all have th ...

htmlcss

Navbar Growth Effect

I'm attempting to create an expanding effect in my navbar using Angular. When I click on "show information," the content should slide up. The issue is that the top part of my footer does not follow the effect. I have tried something like: <foot ...

htmlangulartypescript

Display the div with the specific id when it is clicked using jQuery

How can I make one div appear when another div is clicked? Specifically, I want #musicinfo to appear when #music is clicked. Below is the CSS styling for these elements: #music { float:left; height:25px; margin-left:25px; margin-top:25px ...

jqueryhtmlhideshow

Curved edges achieved without the need for relative positioning

Can anyone help me with a specific code snippet to achieve rounded corners for this page ? Currently, I am using the PIE.htc file which only works when I declare position:relative; throughout the layout, causing disruptions. Is there a code workaround that ...

htmlcss

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

cssangulartypescript

The footer element is missing from the body section of the HTML code, causing the box shadow to not encompass the footer as intended

Having a problem in CSS where the footer is not appearing within the body element in the HTML code. The footer is placed between the body tags, but the box shadow defined for the body is not being applied to the footer. The code snippet below shows the CSS ...

htmlcss

Incorporating a scrollbar when a div exceeds the bottom of the viewport

I am encountering an issue on my webpage with a <div> that contains a <table> with rows of varying heights: <html> <head></head> <body> <div> <table> <tr>... <tr>... ... </ ...

cssscrollbarhtml

Develop a custom Dockerfile for hosting a Python HTTP server in order to showcase an HTML file

I have a folder containing a single HTML file (named index.html) with basic text. When I execute the python command: python -m SimpleHTTPServer 7000 a server is initiated at port 7000 in the same directory to display the page in a web browser. Now, I am ...

htmlpython-2.7dockerdockerfile

What is the best way to extract a thumbnail image from a video that has been embedded

As I work on embedding a video into a webpage using lightbox, I'm looking for advice on the best design approach. Should the videos be displayed as thumbnails lined up across the page? Would it be better to use a frame from the video as an image that ...

javascriptjquerycsshtml

Switch the scroll direction in the middle of the page and then switch it back

Yesterday, while browsing online, I stumbled upon this website and was amazed by the unique scroll direction change from vertical to horizontal mid-page. I'm curious about how they managed to achieve that effect. Does anyone have insight into the pro ...

javascripthtmlcssscroll

Encountering Problem Importing HTML Table Data into R

I am looking to import the data table located at the bottom of a specific webpage into R, either as a dataframe or table. The webpage in question is . Initially, I attempted to utilize the readHTMLTable function from the XML package: library(XML) url <- ...

htmlrxmlweb-scraping

Nuxt3 - TS2339: The 'replaceAll' property is not found on the 'string | string[]' type in Nuxt3

Hey there! I've been experimenting with the replaceAll() method within my Nuxt3 project and encountered a strange error. Folder Structure ───pages │ └───Work │ │ index.vue │ │ [Work].vue Template <templat ...

htmltypescriptvue.jsnuxtjs3

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

How to target the DIV elements that have at least one unordered list (UL) inside using CSS selector or JavaScript

Imagine a hierarchy structured like this: <div class="first_level"> <div class="second_level_1"> <div class="third_level_1"> <div class="fourth_level_1"> <ul><li></li><li></li></ ...

htmlcsscss-selectors

Can CSS be used to target HTML elements that come after another regardless of their position in the document?

Is there a way to style any <h1> element(s) that come after an <h2> element using only CSS? I've searched through countless pages of CSS documentation, trying to figure out if it's possible to target specific elements that appear AFT ...

htmlcsscss-selectorsxhtmlpseudo-class

Acquire the stripe color scheme of Bootstrap tables

I have a Razor component that populates a series of divs within a container. Is there a way to utilize the table-striped color scheme for my odd divs without replacing it entirely? Alternatively, if I create a new CSS class called "Div-Stripe-Row." Can ...

cssbootstrap-5

Utilize jQuery to style the background of the webpage, while excluding the Modal element when using Bootstrap

I'm currently working on implementing foggy.js () to create a blurred background effect for Bootstrap's Modal. While I've successfully blurred all elements in the background, the Modal Popup itself is also appearing blurry. So my question is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the way to change the background color using HTML5 getItem?

Here is the code I am currently using: $(this).css('backgroundcolor', localStorage.getItem('bgColorr') + " !important;"); When I execute this: alert( localStorage.getItem('bgColorr') + " !important;"); I receive the correc ...

jquerycsshtmllocal-storage