ARTICLE AD BOX
Having an issue getting a simple, 2 image crossfade to work.
<!DOCTYPE html> <html> <head> <title>crossfade.html</title> <style> .cfade { background-image:cross-fade(50% url(http://digitmedia.com/crossfade/blonde_yellow_checkered_1.jpg), url(http://digitmedia.com/crossfade/camo_oak_home_1.jpg)); width:200px; height:200px; } </style> </head> <body> <div class="cfade"></div> </body> </html>Nothing loads when I hit the URL.
http://digitmedia.com/crossfade/crossfade_2.html
What am I missing?
9,17862 gold badges202 silver badges220 bronze badges
New contributor
Barry Brinster is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
3
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/cross-fade
The cross-fade() CSS function can be used to blend two or more images at a defined transparency. It can be used for many basic 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.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/cross-fade#browser_compatibility
Requires a vendor prefix or different name for use.
https://github.com/w3c/csswg-drafts/issues/2234
[css-images] cross-fade() syntax doesn't match implemented webkit-cross-fade() #2234
This is a demo showing how you might use cross-fade consistently despite its very limited support:
*I used different pictures because yours where not CORS free and frankly speaking they were riding the trolling side of the coast
This is another strategy that will be more safely supported and it will still behave like you would expect with crossfade blending 2 pictures 50%-50%:
8,8222 gold badges25 silver badges39 bronze badges
Explore related questions
See similar questions with these tags.
