Adding a transition to a card

Agbom emmanuel 0
Viewed 34

.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

css html
2 Answers

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>

Geeky Quentin0

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>

Konstantin Savusia0
Related