Так что в основном я добавил изображение над элементом, когда я нависал над ним, что работает, но затем я добавляю:Как добавить переход в элемент CSS?
переход: 0,2 с;
И это не переход, почему это так? Я хочу, чтобы это облегчило картину, а не сразу появилось.
Справка будет принята с благодарностью.
Если это какая-либо помощь, я использовал контент: url ("location location"); для добавления изображения.
Если я понимаю, что вам нужно, это будет похоже:
.picturehover {
background-color: #f0f0f0;
position: relative;
height: 200px;
width: 300px;
}
.picturehover:after {
background: transparent url(https://lorempixel.com/300/200) center center/cover no-repeat;
content: "";
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: opacity .4s ease-in-out;
}
.picturehover:hover:after {
opacity: 1;
}<div class="picturehover">Some text</div>Я предлагаю вам не использовать 'z-index: 1' и' z-index: -1', потому что если вы используете его, переход fadeout не работает –
Я добавил строки 'z-index' позже, а не тщательно проверили. Спасибо за подсказку, я удалил ее. – connexo
я сделать как этот
.box{
background:#333;
width:100px;
height:100px;
transition:0.2s linear;
}
.box:hover{
background:#ccc;
}<div class="box"></div>
Try 'перехода: все 0.2s; '. – Xufox
Возможный дубликат [Возможно использование перехода с постепенным переходом на тег «content» только с помощью css?] (Http://stackoverflow.com/questions/23938088/is-possible-use-fade-transition-on-tag-content-only -with-css) – Vucko
Вам нужно добавить этот переходный материал в правилах non-hover css. Кроме того, вы не можете просто переместить элемент, который еще не был там раньше. Вы также не можете перевести свойство отображения. – connexo