CODEWITHSUNDEEP
csscss-transitions
alexkodr
alexkodr

Reputation: 543

CSS transition between background image and background color

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>

Upvotes: 0

Views: 12588

Answers (4)

MTK
MTK

Reputation: 3580

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.

Upvotes: 0

Gerard
Gerard

Reputation: 15796

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>

Upvotes: 0

Kris Selbekk
Kris Selbekk

Reputation: 7654

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

Upvotes: 1

Chandra Kumar
Chandra Kumar

Reputation: 4205

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: ' ';
}

Upvotes: 2

Related Questions