Transtion effect not working on hover in html css

MRLappy
June 2, 2024
99 views
0 votes
2 Answers

I want to do some slow smooth transition when hover on .bg-gradient and same when i remove cursor from hover but its come quick gone quick 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>

Answers

There’s possibly a bit of confusion about whether it’s the actual element or a pseudo element that is to be transitioned.

This snippet assumes it’s the element, but you may like to look into using just a pseudo element for that effect as it’s a visual effect only.

.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>

Unfortunately, gradient transitions are not fully supported, but we can get around this problem by simulating the result you want by working on other properties.

First we need to correct the selector you used, from:

.bg-gradient:before

To:

.bg-gradient::before

And we should also correct the hover because the effects will have to be applied on the pseudo-element.
From:

.bg-gradient:hover

To:

.bg-gradient:hover::before

Now, we add 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;
  }

Now all you have to do is intervene on the duration of the transition in order to get the animation you want.

Full code:

.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>

Please signup or login to give your own answer.

Click here to cancel reply.