Upon hovering over, the transition immediately begins, but there is a delay of about 300ms before the reverse transition starts upon hovering off. (https://example.com)
<div id="isa-hover-gallery">
<a href="https://example-link.com">
<div class="isa-image" style="background-image:url('https://example-image.jpg')">
<div class="slide-text">
<p><b>Text Here</b></p>
<p>Additional text goes here...</p>
</div>
</div>
</a>
</div>
#isa-hover-gallery {
display: flex;
flex-wrap: wrap;
}
#isa-hover-gallery .isa-image {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 215px;
min-width: 320px;
margin: 0 24px 24px 0;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
cursor: pointer;
}
#isa-hover-gallery .isa-image::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0);
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image > span {
position: relative;
z-index: 11;
opacity: 0;
color: #ffffff;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
transition: 300ms ease-in;
}
#isa-hover-gallery .isa-image .slide-text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 4px 6px;
background-color: rgba(0,0,0,0.8);
color: #ffffff;
z-index: 11;
}
#isa-hover-gallery .isa-image .slide-text p:first-child {
padding-bottom: 0;
}
#isa-hover-gallery .isa-image .slide-text p:last-child {
max-height: 0;
overflow: hidden;
margin: 0;
padding: 0;
transition: 600ms ease-in;
}
#isa-hover-gallery .isa-image:hover::after {
background-color: rgba(0,0,0,0.6);
}
#isa-hover-gallery .isa-image:hover > span {
opacity: 1;
}
#isa-hover-gallery .isa-image:hover .slide-text p:last-child {
max-height: 1000px;
margin: auto;
padding: auto;
}
Various attempts with different transition speeds and disabling transitions on other elements have been unsuccessful in resolving the issue.