I've got a set of divs and I want each of them to have different background color and while on hover to transition into a background image of chosen url. I have so far managed to find code for smooth color -> image transition but that requires an actual img code in HTML and I need those divs as I will be putting text in them.
Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS?
If you look at http://loopedmag.com you can see what I want to recreate in code but with the transitioned animation color->image.
Best Answer
You can't animate the
background
property from solid color to image with CSS3 transitions.To achieve the desired behaviour, you will need to fade in/out a layer with your solid background color. You may use a pseudo element to minimize markup for that layer.
DEMO
HTML :
CSS :