CSS transition on background image change of DIV

Question

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);
}

There's no transition in the code. Show us what you tried, don't expect us to write things for you. — junkfoodjunkie, Feb 20 '17 at 10:44
it wont work, transition only works for properties with integers (heights, widths, margins, color[rgba] ) — Dev Man, Feb 20 '17 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: http://stackoverflow.com/questions/9483364/css3-background-image-transition — yavor.vasilev, Feb 20 '17 at 10:49

Asons · Answer 1 · 2017-02-20T11:34:48.100

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>

I tested the `opacity` code and works perfect, this solution is beautiful — Gendrith, Jul 14 '17 at 00:23

score 1 · Answer 2 · answered Feb 20 '17 at 10:52

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>

score 1 · Answer 3 · answered Feb 20 '17 at 12:20

1

Use opacity for transitions. It doesnt work with images

answered Feb 20 '17 at 12:20

Mary Oleksiuk

105
2
17

Phantom · Answer 4 · 2017-02-20T13:14:16.483

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>

This doesn't make any difference. – Abhishek Pandey Feb 20 '17 at 11:06 — Abhishek Pandey, Feb 20 '17 at 11:06

CSS transition on background image change of DIV

4 Answers4