0

I have created a double sided box, that when you hover, shows the flip side. I have added in a keyframe that goes from opacity: 0 to opacity: 1 to create a fade effect on hover.

It works to flip the card, however when you move the cursor off the box to return to it's original state, the image does not fade out, and you can see the background of the image when you should not. Please refer to the example below.

.catInner3 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(1, 280px);
}

p {
  color: white;
}

.iprodBox {
  background-color: #ffffff;
  width: 330px;
  height: 230px;
  cursor: pointer;
  transition: 1s;
  box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.25);
}

.iprodImg {
  height: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iprodImg img {
  object-fit: contain;
  height: 70%;
  width: 70%;
}

.iprodTitle {
  height: 20%;
  width: 100%;
  background-color: #184e77;
  box-shadow: 3px 1px 6px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 1s;
}

.iprodDesc {
  position: relative;
  bottom: 80%;
  height: 100%;
  width: 100%;
  text-align: center;
  align-items: center;
  justify-content: center;
  display: none;
}

.iprodBox:hover>.iprodDesc {
  display: flex !important;
  animation: fade 1s;
}

.iprodBox:hover>.iprodImg img {
  display: none !important;
  animation: fade 1s;
}

.iprodBox:hover>.iprodTitle {
  display: none !important;
  animation: fade 1s;
}

.iprodBox:hover {
  background-color: #184e77;
}
<div class="catInner3">
  <a class="iprodBox">
    <div class="iprodImg">
      <img src="https://i.ibb.co/kXY1pG0/meme.jpg"/>
    </div>

    <div class="iprodTitle">
      <p>Test Title</p>
    </div>
    <div class="iprodDesc">
      <div class="vertDesc">
        <p style="font-size: 20px;">Test Title</p>
        <p style="display: inline-flex; width: 75%">Test Text</p>
      </div>
    </div>
  </a>
</div>
safnasfsa
  • 107
  • 9
  • You're only changing the background color on hover, why would the image fade? (that's not background color, that's child content). – Mike 'Pomax' Kamermans May 23 '22 at 15:46
  • This is not true... I have set `.iprodBox:hover>.iprodImg img` too @Mike'Pomax'Kamermans – safnasfsa May 23 '22 at 15:47
  • `display` cannot be transitioned, there is nothing between `block` and `none` (what would half-way between those two values even be? =), so the only transition is on background-color. So on that note: don't use `transition: 1s` for elements that need transitions, make sure to include the properties you expect to transition (e.g. `transition: background-color 1s`). – Mike 'Pomax' Kamermans May 23 '22 at 15:50
  • I am not sure that is applicable to my problem, given that `.iprodBox:hover>.iprodTitle` is working and that is `display`... @Mike'Pomax'Kamermans – safnasfsa May 23 '22 at 15:51
  • No it doesn't, that div immediately toggles, there is no transition on it as we can clearly see when running your code snippet =) – Mike 'Pomax' Kamermans May 23 '22 at 15:55
  • Is there a workaround...? @Mike'Pomax'Kamermans – safnasfsa May 23 '22 at 15:57
  • That's a question that both web search and SO already have answers to, and it always depends on exactly what you need to have happen. In this case, transition `opacity` instead? – Mike 'Pomax' Kamermans May 23 '22 at 16:20
  • I could not find it through web search, and through trial and error. Hence why I asked this question. Instead of telling me this, rather point me in the direction of something useful, or add an answer with a solution @Mike'Pomax'Kamermans – safnasfsa May 23 '22 at 16:55
  • You have new information now, so the idea is you now _search anew_ instead of going "I didn't find anything before". This isn't a one-way street: if folks give you new information, it's still up to you to then search and research based on that new information instead of going "I wrote my post, now it's up to the people on SO to help me". So, in this case, you would have found https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property just fine by searching for "css transition display". – Mike 'Pomax' Kamermans May 23 '22 at 17:30

0 Answers0