0

I'm trying a pretty basic transition but it's not right on Safari.. All I want to do is change background images from A to B on hover. However, the transition is not working the first time I hover over the element. On first hover, it is just instantly changing as opposed to gradually fading in/out.

JSFiddle here -- https://jsfiddle.net/RalphCSD/z9nx30co/4/

I'm using a Wordpress site if that makes any difference..

I've also included the HTML & CSS below. If anyone can see any errors that may be causing the issue I would greatly appreciate any 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>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
Ralph
  • 1
  • 2

2 Answers2

0

Try increasing the transition time from 0.5 seconds to 1.5 seconds:

.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 1.5s ease-in-out;
  -webkit-transition: all 1.5s ease-in-out;
  -webkit-backface-visibility: hidden;
}
SoftwareEngineer
  • 1
  • 1
  • For those wondering, I solved it by preloading the second image like so: body:after{ display:none; content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg); } – Ralph Nov 19 '19 at 14:28
0

You have that jumping in every browser, just rest of them cache the hover image. Basically, you gotta pre-load the image, which is on hover. Like, set it as background for parent element.

V.Volkov
  • 731
  • 3
  • 12
  • But actually, as long as you have the same, just darkened image, Y not to use overlay with black semi-transparent div, and avoid loading second image? – V.Volkov Nov 19 '19 at 13:35
  • Thanks for the reply man! Much appreciated.. But I'm a little confused.. Do you mean declare two background images for the .colBox div? Thanks again man! – Ralph Nov 19 '19 at 13:36
  • Seems like you've managed :) The way you've mentioned in the comment for the next answer is not very common, but still ok. But consider that: https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading I would still recommend half-transparent overlay. – V.Volkov Nov 19 '19 at 20:51
  • There is another option, was popular a while ago, allows to reduce number of requests: make 1 image of those 2: one above and one below, for example. And on hover - change the background-position - show only top half or bottom half. – V.Volkov Nov 19 '19 at 20:53
  • For sure man , was someone else work and was trying to get it done as quick as possible.. Definitely the overlay is the way to go in future. Thanks for your help!! – Ralph Nov 20 '19 at 13:55
  • Glad to be helpful :) – V.Volkov Nov 24 '19 at 19:00