There are two images for reference. It is necessary that one background of the link, in the form of an image, be transferred smoothly to the second.

  • css crossfade in my opinion only in chrome works still, it is possible through the opacity to do that on css that on js. - zb '

2 answers 2

Here are examples on css:

html:

<a class="switchedBackground" href="#"> <div class="bg1"></div> <div class="bg2"></div> <div class="label">Label</div> </a> <a class="switchedBackground2" href="#"> Label </a>

css:

 switchedBackground { width: 300px; height: 200px; position: relative; display: block; } .switchedBackground .bg1 , .switchedBackground .bg2 { width: 100%; height: 100%; position: absolute; top: 0; left:0; transition: all 2s; } .switchedBackground .bg1 { background: url('http://placehold.it/300x200/000/00ee00&text=1'); opacity:1; } .switchedBackground .bg2 { background: url('http://placehold.it/300x200/000/00ee00&text=2'); opacity:0; } .switchedBackground .label { margin: auto; position: absolute; top: 0; } .switchedBackground:hover .bg2 { opacity: 1; } /* только в chrome */ .switchedBackground2 { width: 300px; height: 200px; display: block; background: url('http://placehold.it/300x200/000/00ee00&text=3'); transition: all 3s; } .switchedBackground2:hover { background: url('http://placehold.it/300x200/000/00ee00&text=4'); transition: all 3s; }

http://jsfiddle.net/oceog/uyfN8/

  • then it's not transition all, but transition background or transition opacity - savelichalex
  • it's your business, I wrote just to show it right, and not for copy-paste. - zb '
  • eicto thanks, cool idea! css3.bradshawenterprises.com/cfimg - I found interesting solutions here I think how to apply everything to the link ... - mace

See an example
html

 <a class="example" href="#"><span>Текст много-много текста</span></a>

css

 .example, .example::after, .example > span { display: block; height: 50px; width: 200px; } .example { background-image: url( http://placehold.it/200x50/09c/09c.png); position: relative; } .example::after { background-image: url( http://placehold.it/200x50/c90/c90.png); content: ""; opacity: 1; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .example:hover::after { opacity: 0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } .example::after, .example > span { position: absolute; } .example > span { color: #000; line-height: 50px; text-align: center; z-index: 2; } .example:hover > span { color: #fff; }
  • A smart method ... it’s necessary to sort out the text color now, but it’s not visible at the beginning ... - mace
  • @mace, it was not visible because of the color. Try this. Updated example. - VenZell