My attempt at a simple transition is not working properly on Safari. I am trying to change background images from A to B on hover, but the transition is not smooth when I first hover over the element. Instead of gradually fading in/out, it instantly changes.
You can view my code on JSFiddle here - https://jsfiddle.net/RalphCSD/z9nx30co/4/
I am using a Wordpress site and wondering if that could be causing any issues.
Below is the HTML & CSS I have included. If anyone spots any errors that might be causing the problem, I would greatly appreciate your help.
.colBox {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions.jpg");
right: 0px;
transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
-webkit-backface-visibility: hidden;
}
.colCon {
padding-top: 50px;
padding-left: 35px;
max-width: 200px;
color: white !important;
font-family: 'Montserrat', sans-serif;
}
.colHead {
color: white !important;
font-weight: 400 !important;
font-size: 12px !important;
}
.colHeadLg {
font-size: 40px;
font-weight: 700;
padding-top: 50px;
}
.colP {
font-size: 12px;
line-height: 16px;
}
.moreArrow {
font-size: 20px;
}
.colBox:hover {
width: 100%;
max-width: 300px;
min-height: 400px;
background-image: url("http://www.scatterboxshop.ie/wp-content/uploads/2019/11/Scatterbox-Shop-CTA-Cushions-BG.jpg");
-webkit-backface-visibility: hidden;
}
.hover-div {
width: 200px;
margin-top: 70px;
}
.hover-div .stuff {
margin-top: 0;
position: relative;
width: 100%;
z-index: 2;
-webkit-transition: margin-top 0.5s;
transition: margin-top 0.5s;
}
.hover-div .stuff-hidden {
height: 0;
width: 100%;
overflow: hidden;
-webkit-transition: height 0.5s;
transition: height 0.5s;
}
.hover-div:hover .stuff {
margin-top: -40px;
}
.hover-div:hover .stuff-hidden {
height: 40px;
}<div class="colBox">
<a href="#">
<div class="colCon">
<h2 class="colHead">CUSHION COLLECTION</h2>
<div class="hover-div">
<div class="stuff">
<p class="colHeadLg">Cushions</p>
<p class="colP">Our luxury feather filled cushions are statement pieces each with a story to tell</p>
</div>
<div class="stuff-hidden">
<p class="moreArrow">More <span><i class="fas fa-arrow-right"></i></span></p>
</div>
</div>
</div>
</a>
</div>