CSS fade effect background color [duplicate] - html

Question

This question already has an answer here:
Change Background-Color of div element Cross Fade in a Loop
(1 answer)
Closed 7 years ago.
hello guys i running a fade effect with css, works perfect, i want change the color when get the fade but i had no success.
the fade change color if i use without image, but if i using with i image does not work.
example:
i tried :
background-color: red;
but i had no success, anyway somebody know how can make the fade backgroundbe a different color? right now just going to white, its possible do another color?
right now i have a image and whe i hover the mouse appear a fade white effect, i just wanna change the white to red.
php:
<img id="slide-img-1" src="<?php echo get_bloginfo('template_directory');?>/public/images/get_.jpg" class="slide fade " alt="" />
css:
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.5;
}

Answer 1

Here's a Fiddle that overlays a background: red; over a div containing your image of choice.
HTML
<div class="box fade"><img src="http://placehold.it/350x150"></div>
CSS
.box {
width:350px;
height:150px;
}
.fade {
position: relative;
}
.fade:after {
background-color: red;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover:after {
opacity: .5;
}