Adding a transition to a card-CodePudding

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

CodePudding user response：

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 >
  <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 >
    <h4>Laynard</h4>
    <p>Brand-identity</p>
  </div>
</div>

CodePudding user response：

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 >
  <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 >
    <h4>Laynard</h4>
    <p>Brand-identity</p>
  </div>
</div>