I have created a demo that showcases a simulation of the issue here.
Codepen: https://codepen.io/anon/pen/pXvyMd
I am attempting to achieve a fading effect on the caption text 'this is a test' when hovering over the box at the top right of the image, instead of it disappearing abruptly. The surrounding div transitions out in 0.4s as per the code, however, the caption text vanishes instantly for some reason.
What is causing this behavior, and how can it be resolved? The transition should be applied to ALL elements, as indicated by the following line of CSS:
.full-width-image-atf .content-main-image, .full-width-image-atf .content-main-image * { transition: 0.4s ease all }
Thank you for any assistance.
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>