CSS hover transition with opacity

Question

I have a div with a plain background that turns into an image on hover. I would like a transition such that the fade effect isn't instant but I can't seem to make this work. I can make it work if i add an opacity: 0.5 to the .split.left:hover but then the text color is also affected. I would prefer if it was only the background that changed on hover.

I am wondering if this is because I am using a Safari browser or if I am simply implementing it wrong?

.split.left {
  left: 0;
  background: linear-gradient( rgba(255, 255, 255, 1.0), rgba(255, 255, 255, 1.0));
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
  border-right: 1px solid #f3f3f3;
}

.split.left:hover {
  left: 0;
  background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('../images/img/split-left2.jpg') center center no-repeat;
}

<section class="split-menu">
  <div class="split-container">
    <div class="split left">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
        ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
        eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
        tempora quasi modi quis.</div>
      <a href="#" class="split-button">Read More</a>
    </div>
    <div class="split right">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
        blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
        ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
        ad.</div>
      <a href="#" class="split-button">Read More</a>
    </div>
  </div>
</section>

Answer 1

When using opacity, in your case it would affect the content of .split.left as well.

An option here is to use a pseudo element for the gradient/background image, and you can easily fade it in/out w/o affecting the rest of the content.

It also keeps things clean, and no need for extra markup.

Stack snippet

.split.left {
  position: relative ;
  border-right: 1px solid #f3f3f3;
}
.split.left > * {
  position: relative ;              /*  this will avoid using z-index on pseudo  */
}

.split.left::before {
  content: '';
  opacity: 0;
  transition: opacity 1s linear;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;  
  background: linear-gradient(
    rgba(34, 47, 61, 0.1),
    rgba(34, 47, 61, 0.5)),
    url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}

.split.left:hover::before {
  opacity: 1;
}

<section class="split-menu">
    <div class="split-container">
      <div class="split left">
        <h1>Lorem Ipsum</h1>
        <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque tempora quasi modi quis.</div>
        <a href="#" class="split-button">Read More</a>
      </div>
      <div class="split right">
        <h1>Lorem Ipsum</h1>
        <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in ad.</div>
        <a href="#" class="split-button">Read More</a>
      </div>
    </div>
  </section>

---

This one with a delay when hovered, before the background shows.

Stack snippet

.split.left {
  position: relative ;
  border-right: 1px solid #f3f3f3;
}
.split.left > * {
  position: relative ;
}

.split.left::before {
  content: '';
  opacity: 0;
  transition: opacity 1s 0s linear;
  position: absolute;
  left: 0; top: 0;
  right: 0; bottom: 0;  
  background: linear-gradient(
    rgba(34, 47, 61, 0.1),
    rgba(34, 47, 61, 0.5)),
    url('http://placehold.it/300x100/faa/faa') center center no-repeat;
}

.split.left:hover::before {
  opacity: 1;
  transition: opacity 1s .5s linear;
}

<section class="split-menu">
    <div class="split-container">
      <div class="split left">
        <h1>Lorem Ipsum</h1>
        <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque tempora quasi modi quis.</div>
        <a href="#" class="split-button">Read More</a>
      </div>
      <div class="split right">
        <h1>Lorem Ipsum</h1>
        <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in ad.</div>
        <a href="#" class="split-button">Read More</a>
      </div>
    </div>
  </section>

Answer 2

I created a working fiddle for you over here.

I made image its own div with position: absolute, and then made its container and text inside position: relative.

.split.left {
  position: relative;
  border-right: 1px solid #f3f3f3;
}

.split.left .image {
  opacity: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient( rgba(34, 47, 61, 0.5), rgba(34, 47, 61, 0.5)), url('https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg') center center no-repeat;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.split.left:hover .image {
  opacity: 1;
}

h1,
.split-menu-text,
a.split-button {
  position: relative;
  z-index: 1;
}

<section class="split-menu">
  <div class="split-container">
    <div class="split left">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
        ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
        eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
        tempora quasi modi quis.</div>
      <a href="#" class="split-button">Read More</a>
      <div class="image"></div>
    </div>
    <div class="split right">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
        blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
        ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
        ad.</div>
      <a href="#" class="split-button">Read More</a>
    </div>
  </div>
</section>

Answer 3

You can use transition delay but you may need you break background into image and color separately.

.split.left {
  left: 0;
 
  transition: 0s background-color;
  -moz-transition: 0s background-color;
  -webkit-transition: 0s background-color;
  border-right: 1px solid #f3f3f3;
    
}

.split.left:hover {
  left: 0;
  background-color: rgba(34, 47, 61, 0.5);
  background-image: url('../images/img/split-left2.jpg') center center no-repeat;
   transition-delay: 1s;
   
  }

<section class="split-menu">
  <div class="split-container">
    <div class="split left">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim neque voluptatibus, modi rerum dolor temporibus architecto sapiente ipsam, ea quae ducimus officiis aliquid odio perspiciatis nisi vitae ad tenetur iste quas suscipit! Aut, nisi corrupti
        ducimus magni cumque, illum provident, esse obcaecati illo doloremque, sunt necessitatibus. Laborum pariatur neque sequi natus, ducimus nisi obcaecati necessitatibus magnam perferendis! Ex alias adipisci dolorum nostrum vel reprehenderit accusamus
        eum earum consequatur optio illum consectetur itaque, aut minus doloremque ducimus ad perferendis, inventore magnam rerum quaerat recusandae aspernatur harum. Porro debitis, reiciendis facere voluptas eveniet explicabo libero autem pariatur doloremque
        tempora quasi modi quis.</div>
      <a href="#" class="split-button">Read More</a>
    </div>
    <div class="split right">
      <h1>Lorem Ipsum</h1>
      <div class="split-menu-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus nihil officia a accusamus nulla voluptas mollitia nostrum nesciunt, ducimus quam saepe vitae dolore at consequatur deleniti architecto itaque nobis temporibus adipisci hic. Harum
        blanditiis necessitatibus dolore dolorem eius inventore, voluptatibus minima adipisci nesciunt fuga ipsum esse, quasi reiciendis tempora. Similique doloremque odio, eligendi facilis, tenetur, nobis velit quod quasi, sit mollitia aliquam deleniti
        ipsum quo illo! Impedit minima tenetur eveniet earum vitae dicta ut odio eius eos, temporibus sint dignissimos quia, molestias, voluptatum. Repellat cum quaerat perspiciatis, a dolores aliquid autem vitae sit, minima quod odit nostrum maxime in
        ad.</div>
      <a href="#" class="split-button">Read More</a>
    </div>
  </div>
</section>

Hope this helps