Анимация элемента блока для «выцветания» над другим

У меня есть некоторые ссылки на изображения, которые перекрываются, и при наведении мыши я хочу, чтобы один парил, чтобы появиться над остальными.Анимация элемента блока для «выцветания» над другим

Легко просто изменить z-index на зависание и сделать это одним над остальными. Но я ищу здесь анимацию с надписью. Я не думаю, что есть способ анимации z-индекса в CSS, но есть ли какой-то другой трюк с непрозрачностью здесь, я отсутствую, что может заставить эти ссылки выглядеть так, будто они «затухают выше» других?

<div class="block-links"> 
    <a href="#" style="background-image:url(http://placekitten.com/400);"></a> 
    <a href="#" style="background-image:url(http://placekitten.com/500);"></a> 
</div>

Codepen: http://codepen.io/tenold/pen/dXmXyX

UPDATE

В случае, если кто-то приходит сюда в поисках этого ответа, это то, что я в конечном итоге делает, основываясь на ответе Стива АиР ниже. Я добавил несколько javascript, чтобы сделать его более масштабируемым.

http://codepen.io/tenold/pen/qNoNkb

источник

2016-07-20 Corey

Одним из вариантов было бы использовать два элемента для первого изображения, один «за» и один «перед» второго изображения. Установите непрозрачность «переднего» изображения на 0 и анимируйте это свойство до 1 при наведении. См .: http://codepen.io/slrubinstein/pen/EyEyya

#front { 
    position: absolute; 
    opacity: 0; 
    transition: opacity .5s; 
} 

#front:hover { 
    opacity: 1; 
}

источник

2016-07-20 16:54:58

Это то, что я хочу, но я добавил только 2 изображения, например, саке, у меня есть 4 изображения в ширину, например: http://codepen.io/tenold/pen/qNoNkb – Corey

Может быть, есть slicker способ сделать это с: до и: после. – Corey

Я уверен, что есть более легкий способ! это длинное, затянутое доказательство концепции. Вы можете сделать эту работу с четырьмя изображениями, но вы, вероятно, захотите реорганизовать ее, чтобы сделать ее более удобной. An: после псевдокласса с тем же свойством background-image это хорошая мысль. Вот эффект с 4 изображениями: http://codepen.io/slrubinstein/pen/RRrRxj –

-1

Используйте свойство CSS3 перехода. Просто добавьте класс .fade к любым объектам, которые вы хотите угаснуть.

.fade { 
    opacity: 0.5; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
    z-index: 10; 
} 

.fade:hover { 
    opacity: 1.0; 
    z-index: 1000; 
}

источник

2016-07-20 16:48:25 TheValyreanGroup

Но тогда они имеют 0,5 непрозрачности по умолчанию. – Corey

Вы можете добавить немного jQuery, чтобы быстро переключить класс «fade» на каждый элемент мыши, введя любой из них. Таким образом, они сидят с полной непрозрачностью, пока не будет виден один элемент, а затем jQuery добавит класс .fade и опустит их все до непрозрачности .5, а тот, который завис, исчезает до полного. – TheValyreanGroup

Это тоже не очень хорошо, потому что когда вы выталкиваете мышь, у последнего все еще есть 0,5 непрозрачности. – Corey

-1

Нечто подобное?

.block-links { 
 
    position: relative; 
 
} 
 

 
a { 
 
    float:left; 
 
    display: block; 
 
    position: relative; 
 
    width:200px; 
 
    height:200px; 
 
    background-size:cover; 
 
    background-position:center center; 
 
    z-index: 0; 
 
    
 
    opacity: 1; 
 
} 
 

 
a:last-child { 
 
    top:50px; 
 
    left:-50px; 
 
} 
 

 
a:hover { 
 
z-index: 2; 
 
    animation: fade 1.6s ease; 
 
} 
 
    @keyframes fade { 
 
    33% { opacity: 0 } 
 
    100% { opacity: 1 } 
 
    
 
}

<div class="block-links"> 
 
    <a href="#" style="background-image:url(http://placekitten.com/400);"></a> 
 
    <a href="#" style="background-image:url(http://placekitten.com/500);"></a> 
 
</div>

источник

2016-07-20 16:57:37 EddNewGate

Не совсем, они должны быть полностью непрозрачными по умолчанию. – Corey

Когда вы наведите курсор на одно изображение, вы хотите оказаться выше остальных с эффектом «fadein», если я правильно понял? – EddNewGate

Да, но по умолчанию они должны быть полностью непрозрачными. Вместо того, чтобы просто менять z-index и «привязывать» их к другому, я ищу более плавный переход сюда. Эффект в ответе @Steve R - это точный эффект, который я ищу, но мне нужно, чтобы он был более масштабируемым. – Corey

Анимация элемента блока для «выцветания» над другим

ответ

Смежные вопросы