1

Есть два изображения для ссылки. Нужно что бы один фон ссылки, в виде изображения переходил плавно во второе.

1
  • css crossfade по-моему только в chrome работает всё ещё, можно через opacity сделать что на css что на js.
    – zb'
    21 фев 2014 в 6:59

2 ответа 2

3

Вот примеры на 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/

3
  • тогда уж не transition all, a transition background или transition opacity 21 фев 2014 в 7:24
  • это ваше дело, я писал просто чтобы показать как надо, а не для копипасты.
    – zb'
    21 фев 2014 в 7:26
  • eicto спасибо, идея крутая! css3.bradshawenterprises.com/cfimg - здесь нашел интересные решения думаю как вот все к ссылке применить...
    – mace
    21 фев 2014 в 9:00
2

Посмотреть пример
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;    
}
2
  • Шикарный метод... надо теперь с цветом текста разобраться а то его в начале вообще не видно...
    – mace
    21 фев 2014 в 10:25
  • @mace, его не из-за цвета не было видно. Попробуйте так. Обновил пример.
    – VenZell
    21 фев 2014 в 10:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.