Smoothly change image source on hover

I'm currently using css to change my image source, however it is very abrupt. How can I make the image change smoothly on mouse in and mouse out using css or jquery?

Current code:

    .containerBox1:hover{
	content: url('http://example.com/prouser-newimage.png');
    }
    .containerBox2:hover{
	content: url('http://example.com/domuser-newimage.png');
    }
    .containerBox3:hover{
	content: url('http://example.com/aboutus-newimage.png');
    }
<a href="http://example.com/prouser">
    <div class="containerBox1">
    <img src="http://example.com/prouser.png"/>
    </div>
    </a>
    <a href="http://example.com/domuser/">
    <div class="containerBox2">
    <img src="http://example.com/domuser.png"/>
    </div>
    </a>
    <a href="http://example.com/aboutus">
    <div class="containerBox3">
    <img src="http://example.com/aboutus.png"/>
    </div>
    </a>

Thank you, D

Answers 1

  • Actually You should not use content here because something like transition not working on content, instead of content use background-image and then use transition, you could google and find your answer faster but i answered to correct your mistake otherwise finding transition is so easy on google.

    .containerBox1 {
        transition: .3s background ease;
        background: url(https://googlechrome.github.io/samples/picture-element/images/butterfly.jpg);
        width: 200px;
        height: 200px;
        background-size: cover;
    }
    
    .containerBox1:hover {
        background: url(https://media.winnipegfreepress.com/images/400*384/3229268.jpg);
        background-size: cover;
    }
    <a href="http://example.com/prouser">
      <div class="containerBox1">
      </div>
    </a>


Related Articles