Adding a transition to a card - html

Question

.grid_content {
max-width: 700px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
display: block;
}
.caption {
position: absolute;
z-index: 1;
bottom: 0;
padding: 30px;
colour: white;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s;
}
h4 {
font-family: var(--font-style-custom);
letter-spacing: 3px;
}
p {
margin: 5px;
}
h4,
p {
position: relative;
top: 85px;
}
.caption:hover {
transition: 1s;
opacity: 1;
background: linear-gradient(hsl(0, 0%, 100%, 0.1), hsl(0 0% 0% / 0.6));
}
<div class="grid_content">
<img src="https://img.freepik.com/free-psd/box-packaging-mockup-isolated_23-2149208917.jpg?w=740&t=st=1663223199~exp=1663223799~hmac=6f0288bfcdf858b4908269c5406636c1f3c0bfca3e70041f67d9adc5b0be7dea" alt="Brading image">
<div class="caption">
<h4>Laynard</h4>
<p>Brand-identity</p>
</div>
</div>
Whenever I hover on the image, I want the background color to slowly transition in and out, but here it only transitions in and disappears when I don't hover, I've added transition to the caption div element in the card and it still didn't work

Answer 1

As initially the opacity of the element with the class caption's opacity is set to 0, it's recommended to include the background property in .caption {...} rather than in .caption:hover {...}.
Additionally, remove the transition property in .caption:hover as it's useless.
The issue with your implementation is that when the cursor hovers over the element, the background property is set, and when the cursor is not longer hovering over the element, the background property is reset and the transiton property doesn't get applied to it.
.grid_content {
max-width: 700px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
display: block;
}
.caption {
position: absolute;
z-index: 1;
bottom: 0;
padding: 30px;
colour: white;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s;
background: linear-gradient(hsl(0, 0%, 100%, 0.1), hsl(0 0% 0% / 0.6));
}
h4 {
font-family: var(--font-style-custom);
letter-spacing: 3px;
}
p {
margin: 5px;
}
h4,
p {
position: relative;
top: 85px;
}
.caption:hover {
opacity: 1;
}
<div class="grid_content">
<img src="https://img.freepik.com/free-psd/box-packaging-mockup-isolated_23-2149208917.jpg?w=740&t=st=1663223199~exp=1663223799~hmac=6f0288bfcdf858b4908269c5406636c1f3c0bfca3e70041f67d9adc5b0be7dea" alt="Brading image">
<div class="caption">
<h4>Laynard</h4>
<p>Brand-identity</p>
</div>
</div>

Answer 2

Move your background style from .caption:hover to .caption
You already made the transition of opacity
.grid_content {
max-width: 700px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
display: block;
}
.caption {
position: absolute;
z-index: 1;
bottom: 0;
padding: 30px;
colour: white;
width: 100%;
height: 100%;
opacity: 0;
transition: 1s;
background: linear-gradient(hsl(0, 0%, 100%, 0.1), hsl(0 0% 0% / 0.6));
}
h4 {
font-family: var(--font-style-custom);
letter-spacing: 3px;
}
p {
margin: 5px;
}
h4,
p {
position: relative;
top: 85px;
}
.caption:hover {
transition: 1s;
opacity: 1;
}
<div class="grid_content">
<img src="https://img.freepik.com/free-psd/box-packaging-mockup-isolated_23-2149208917.jpg?w=740&t=st=1663223199~exp=1663223799~hmac=6f0288bfcdf858b4908269c5406636c1f3c0bfca3e70041f67d9adc5b0be7dea" alt="Brading image">
<div class="caption">
<h4>Laynard</h4>
<p>Brand-identity</p>
</div>
</div>