3

I tried to apply transition property to give an effect when image changes on hover but it seems to not work. Please have a look and help me out.

.ow-outer { background-color: #fff; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #fff; text-align: center; padding: 20px; background-image: url(../images/team-canada-light.png); background-size: 120px; background-repeat: no-repeat; background-position: center; transition: all 0.3s ease-in-out; } .ow-outer:hover { background-image: url(../images/team-canada.png); }
Improve this question
5
  • 1
    There's no transition in the code. Show us what you tried, don't expect us to write things for you. Commented Feb 20, 2017 at 10:44
  • as @junkfoodjunkie said, no code = no answers Commented Feb 20, 2017 at 10:45
  • oh yes! my bad.. updated... Commented Feb 20, 2017 at 10:45
  • 1
    it wont work, transition only works for properties with integers (heights, widths, margins, color[rgba] ) Commented Feb 20, 2017 at 10:46
  • I don't know if you made any research before posting your question here, but here is a thread with few working solution/workarounds for you: stackoverflow.com/questions/9483364/… Commented Feb 20, 2017 at 10:49

4 Answers 4

Reset to default
8

Transition on background-image doesn't work cross browser, so use a pseudo element instead

Using opacity

.ow-outer { position: relative; background-color: #fff; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #fff; text-align: center; padding: 20px; background: url(http://placehold.it/200) no-repeat center; background-size: 120px; } .ow-outer::before { content: ''; position: absolute; left: 0; top: 0; right:0; bottom: 0; background: url(http://placehold.it/200/f00) no-repeat center; background-size: inherit; opacity: 0; transition: opacity 0.3s ease-in-out; } .ow-outer:hover::before { opacity: 1; }
<div class="ow-outer"></div>

Using transform: scale

.ow-outer { position: relative; background-color: #fff; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #fff; text-align: center; padding: 20px; background: url(http://placehold.it/200) no-repeat center; background-size: 120px; } .ow-outer::before { content: ''; position: absolute; left: 0; top: 0; right:0; bottom: 0; background: url(http://placehold.it/200/f00) no-repeat center; background-size: inherit; transform: scale(0); transition: transform 0.3s ease-in-out; } .ow-outer:hover::before { transform: scale(1); }
<div class="ow-outer"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I tested the opacity code and works perfect, this solution is beautiful
1

Here is the solution. Used images from some example..

.bgImg { width: 500px; height: 500px; background-image: url(http://i.imgur.com/tmM8Bpy.jpg); -webkit-transition: background-image 0.5s linear; -moz-transition: background-image 0.5s linear; -ms-transition: background-image 0.5s linear; transition: background-image 0.5s linear; } .bgImg:hover { background-image: url(http://i.imgur.com/FWqOONj.jpg); }
<div class="bgImg"></div>

Improve this answer

Comments

1

Use opacity for transitions. It doesnt work with images

Improve this answer

Comments

0

Use background css property instead of background-image property it will work...

 .ow-outer { background-color: #fff; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #fff; text-align: center; padding: 20px; background: url('https://www.hello.com/img_/hello_logo_hero.png'); background-size: 120px; background-repeat: no-repeat; background-position: center; transition: all 5s ease-in-out; } .ow-outer:hover { background: url('https://images.chesscomfiles.com/uploads/v1/blog/287126.d6272c47.630x354o.36990d3fc701.png'); }
<div class="ow-outer"></div>

Improve this answer

1 Comment

This doesn't make any difference.