CSS transition between background image and background color

Question

I'm trying to do a basic ease out transition on a panel with a background image. I'm wanting it to fade to background color on hover. I've tried using various transitions non of which are working. I've tried (which i thought would work):

transition:background-image 0.2s ease-in-out;

.panel {
  width:200px;
  height:200px;
  background:#000 url("https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png") no-repeat center center / cover;
  transition:background-image 0.2s ease-in-out;
}
.panel:hover {
  background:#000;
  transition:background-image 0.2s ease-in-out;
}

<div class="panel"></div>

Chandra Kumar · Accepted Answer · 2017-07-31 12:34:56Z

2

You can use this code:

Demo is here: https://output.jsbin.com/yadiwoviwe

.panel {
  position: relative;
  background: rgba(0,0,0,0) url(https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png) no-repeat center center / cover;
  width:200px;
  height:200px;
  transition: background-color 0.2s ease-in-out;
}
.panel:hover {
  background-color: rgba(0,0,0,.5);
}
.panel:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}

answered Jul 31, 2017 at 12:34

Chandra Kumar

4,2131 gold badge19 silver badges26 bronze badges

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

1 Comment

alexkodr Over a year ago

That would work but if i wanted to add any text content within the panel div it would also fade that out too.

Kris Selbekk · Accepted Answer · 2017-07-31 12:40:47Z

Unfortunately, you can't do this in this way.

The reason is that you're trying to animate the background-image property - a property that isn't animatable.

Instead, you can use a cool little trick that uses a pseudo-element to create the background image instead:

.panel {
  width: 200px;
  height: 200px;
  position: relative;
  background: pink;
}

.panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
  background: url(https://unsplash.it/200) center center no-repeat;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  will-change: opacity;
  transition: opacity .1s ease-out;
}

.panel:hover::after {
  opacity: 0.5;
}

<div class="panel"></div>

Inspired by this cool little article on CSSTricks

Gerard · Accepted Answer · 2017-07-31 13:07:56Z

0

Alternatively, you can manipulate the opacity of the image.

.panel {
  width: 200px;
  height: 200px;
  background: #000;
  position: relative;
  color: white;
  text-align: center;
}

.panel:after {
  content: "";
  background-image: url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_1280.png');
  background-size: 200px 200px;
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.panel:hover:after {
  opacity: 0;
}

<div class="panel"><h1>Text</h1></div>

answered Jul 31, 2017 at 13:07

Gerard

15.8k5 gold badges33 silver badges53 bronze badges

Comments

cazzo13 · Accepted Answer · 2021-07-14 19:55:07Z

0

Outdated answer, transition with image working currently with CSS.

-webkit-transition: all 1s ease-out;  
-moz-transition: all 1s ease-out;  
-o-transition: all 1s ease-out;  
transition: all 1s ease-out;

background-image instead of 'all' and you'll see.

edited Jul 14, 2021 at 19:55

cazzo13

31 silver badge2 bronze badges

answered Jul 31, 2017 at 12:41

MTK

3,6005 gold badges40 silver badges60 bronze badges

Collectives™ on Stack Overflow

CSS transition between background image and background color

4 Answers 4

1 Comment

Comments

Comments

Outdated answer, transition with image working currently with CSS.

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Outdated answer, transition with image working currently with CSS.

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related