CSS Fade between Background Color and Image

css transition
css background-image transition fade
css transition: background-image
css transition not working
css transition: all
css transition slide right to left
css hover transition effects
background image gradient

I made a simple CSS Grid with some Tiles, and at the moment, I'm trying to set the tiles so that when you hover over them a Background Appears, i tried the transition tag but it doesn't work. Tried a few Solutions from the Web but they didn't worked with the Grid System. I'm trying to add a little Delay before the Image Appears.

.box1 {
  background: #6fc3df;
  grid-area: 1 / 1 / 2 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box1 h1 {
  margin-left: 1em;
}

.box1:hover {
  background-image: url("images/pic02.jpg");
}
<div class="tiles">
  <div class="box box1">
    <h1>Test</h1>
  </div>
  <div class="box box2">
    <h1>Test</h1>
  </div>
</div>

Just a small hack.

Wrap the div which need to fade another div with intended background and make child's background transparent once mouse hover over it.

Note: OP wanted to do this with multiple div's with different images. So here is an example with two div's.

#wrapper-1{
  background: url("https://via.placeholder.com/100x50") rgba(111, 195, 223, 1);
}

#wrapper-2{
  background: url("https://via.placeholder.com/200x100") rgba(111, 195, 223, 1);
}

.box1, .box2 {
    grid-area: 1 / 1 / 2 / 3 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background 0.5s ease;
    background: rgba(111, 195, 223, 1);
}

.box1 h1, .box2 h1{
    margin-left: 1em;
}

.box1:hover, .box2:hover{
  background: rgba(111, 195, 223, 0);
}
<div class="tiles">
    <div id="wrapper-1">
      <div class="box box1">
        <h1>Test</h1>
      </div>
    </div>
    <div id="wrapper-2">
      <div class="box box2">
          <h1>Test</h1>
      </div>
    </div>
</div>

transition, The transition CSS3 property cannot fade background images, but you can move them from top to bottom, left to right, etc. If you combine these movements with a background color that matches the color your background gradient fades to, you can achieve your desired fade effect. Definition and Usage. The background-blend-mode property defines the blending mode of each background layer (color and/or image).

I have changed some things in your code. CSS transition doesn't work with background images, so i changed it to an image tag. See new code on fiddle

<div class="tiles">
<div class="box box1">
    <h1>Test</h1>

    <img src="https://www.mail-signatures.com/wp-content/uploads/2019/02/How-to-find-direct-link-to-image_Blog-Picture.png" />
</div>
<div class="box box2">
    <h1>Test</h1>
</div>

.box1 {
    background: #6fc3df;
    grid-area: 1 / 1 / 2 / 3 ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.box1 h1 {
    margin-left: 1em;
    position: relative;
    z-index: 1;
}

img {
  transition: 1s opacity;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.box1:hover img {
    opacity: 1;
}

How to fade a gradient background image with CSS transitions , CSS transitions allows you to change property values smoothly (from one value to Add a transition effect (opacity and background color) to a button on hover:  cross-fade () The CSS cross-fade () function can be used to blend two or more images at a defined transparency. It can be used for many simple image manipulations, such as tinting an image with a solid color or highlighting a particular area of the page by combining an image with a radial gradient.

Would this suit your needs?

div {
  background-color: #666;
  height: 280px;
  width: 480px;
  position: relative;
}

div::before {
  content: "1";
  color: white;
  font-size: 144px;
  font-weight: 900;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  }

div::before,
div::after {
  position: absolute;
}

div::after {
top: 0;
  left: 0;
  right: 0;
  bottom: 0;  opacity: 0;
  content: '';
  background-image: url(http://connexo.de/img/screenshots/lbbw-falcon.png);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition: opacity .4s ease-in-out;
}

div:hover::after {
  opacity: 1;
}
<div></div>

How To - Transition on Hover, Adding CSS animation to your website shouldn't be an afterthought. You don't want it In these instances, an image will go from transparent to full opacity. Software engineer .yellow { background-color: lightyellow; } .red { Update: If the image is just serving as background—as is the case in your linked example—the gradient and image can both be set on the css for the containing element:

How to Add a Fade-in Animation to Your Website Using CSS, For example, if you change the color of an element from white to black CSS Transitions are controlled using the shorthand transition property. CSS gradients also support transparency, which can be used to create fading effects. To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

Using CSS transitions, CSS Transitions (http://dev.w3.org/csswg/css3-transitions/) and Animations and radial-gradient() images by interpolating the colors and color-stops, .box { background-image: url(kitten.png); transition: background-image 1s;. } When hovered, the background-image of the box should do a 1-second crossfade between  You can transition background-image. Use the CSS below on the img element:-webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; This is supported natively by Chrome, Opera and Safari. Firefox hasn't implemented it yet . Not sure about IE.

CSS Image Transitions, In CSS, background-image(s) are used everywhere, but not many SASS Syntax .bg-transition { .img { background-color:rgba(red,0.75);  Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial. Because they are of the image data type, gradients can be used anywhere an image might be. The most popular use for gradients would be in a background element.

Comments
  • @patric see this jsfiddle.net/26L1b4jf
  • i think your image path is wrong it is working i just change the image url or else if problem is something else please elaborate
  • thx already, i did the same with my code but i want a little delay on the change to the background, so it isnt instanly poping up
  • for that you can use setTimeout() in javascript or can use jquery
  • Im pretty new to this is it possible for you to provide some code?
  • Thx alot it helped a lot only thing i changed is that the wrapper class is before the tiles lass because otherwise the tiles wouldn't be the right shape anymore. Is there a possible Solution how i can set a different Picture for every tile. Here is the complete code for better overview: jsfiddle.net/o20bud9h
  • @SirFail just make separate wrapper div for all the divs where you want this. Although I would recommend changing .wrapper class to some id i.e.#wrapper-one
  • when i do that the tiles get all unformatted and dont have the right size anymore
  • @SirFail I have updated the code. It does same thing with two div.
  • i did it myself like this and the grid is now completly Broken, see here: jsfiddle.net/xbu7L0g5