Child div disappears instantly rather than transitioning like parent

Question

I've built a demo to demonstrate a replica of the problem here.

Codepen: https://codepen.io/anon/pen/pXvyMd

I'm trying to make it so that when hovering over the box at the top right of the image, the caption text 'this is a test' fades out rather than disappearing instantly. The div surrounding the box transitions out in 0.4s as coded, but for some reason, the caption text disappears instantly.

Why does this happen, and how can it be fixed? The transition should be applied to ALL elements, as per the following line of CSS:

.full-width-image-atf .content-main-image, .full-width-image-atf .content-main-image * { transition: 0.4s ease all }

Thanks for any help here.

img {width: 100%}
.full-width-image-atf .content-main-image {
  position: relative;
  color: #fff;
}

.full-width-image-atf .image-caption-wrap {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
  padding: 15px 20px;
}
.full-width-image-atf .image-caption-wrap:before {
  content: '\f05a';
  font-family: 'Font Awesome 5 Pro';
  font-size: 2em;
}
.full-width-image-atf .image-caption {
  display: none;
  padding-right: 10px;
}
.full-width-image-atf .image-caption-wrap:hover .image-caption {
  display: block;
}
.full-width-image-atf .image-caption-wrap:hover {
  background: black !important;
  cursor: pointer;
}
.full-width-image-atf .content-main-image, .full-width-image-atf .content-main-image * { transition: 0.4s ease all }

<div class='full-width-image-atf'>
  <div class="content-main-image">
    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2018/12/31/10/lion-face.jpg?w968h681" alt="This is a test">
    <div class="image-caption-wrap" style="background: none;">
      <span class="image-caption">This is a test</span>
    </div>
  </div>
</div>

I don't think you can animate `display`. Try `opacity` instead. See [here](https://codepen.io/anon/pen/WqbxoZ) — zgood, Jun 11 '19 at 21:20

score 1 · Accepted Answer · answered Jun 11 '19 at 21:21

It is so simple. the transition element in css does not apply to a change in display. Therefore if the display is changed whether from block to none Transitioning does not work out.. Or it works out in a distorted manner.

I changed the display to opacity..

.full-width-image-atf .image-caption {
     opacity:0;
      padding-right: 10px;
    }
    .full-width-image-atf .image-caption-wrap:hover .image-caption {
      opacity:1;
    }

Child div disappears instantly rather than transitioning like parent

1 Answers1