i want to do some slow smooth transition when hover on .bg-gradient and same when i remove cusor 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.80) 50% ); transition: all .3s ease-in-out; -webkit-transition: all .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>
here is my code