Как затухать фоновое изображение при наведении элемента с помощью css

Question

Я использую элемент, в котором применяется фоновое изображение. Когда я наводил на этот элемент одно и то же фоновое изображение, нужно немного потушить. Можно ли это использовать без использования второго изображения.

Answer 1

Проверить это Fiddle:

.image1{ 
 
    width:400px; 
 
    height:400px; 
 
    background-image: url("http://www.designsnext.com/wp-content/uploads/2014/04/nature-wallpapers-3.jpg"); 
 
    background-repeat:no-repeat; 
 
    background-size:100%; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
    
 
} 
 

 
.image1:hover{ 
 
    width:400px; 
 
    height:400px; 
 
    background-image:url("http://wallpapersshd.com/wp-content/uploads/2013/02/free-natural-wallpaper.jpg"); 
 
    background-size:100%; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
}

<div class="image1"></div>

Answer 2

Самый простой способ сделать это, чтобы установить прозрачный слой над элементом, содержащим изображение, и угасать это. See this JSFiddle для рабочего примера.

CSS

.example { 
height: 80px; 
width: 200px; 
background: url(http://lorempixel.com/400/200/) 50% 50% no-repeat; 
background-size: cover; 
} 

.example:after { 
content: " "; 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: red; 
opacity: 0; 
position: relative; 
transition: .3s all; 
} 

.example:hover:after { 
opacity: 0.8; 
} 

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

HTML

<div class="example"></div>