jQuery Hover Div to Fade/Blur/Change Background Image

Question

Я пытаюсь навести курсор мыши на div и иметь фоновое изображение, исчезающее с размытием -> фокус и возврат к исходному цвету фона с зависанием (желательно с затуханием out и focus -> размытие изображения). У меня это работает:

Я использую gif, который имеет встроенный фейд, но он будет только исчезать при первом наведении. После этого он просто реагирует на ключевой кадр. У меня есть непрозрачность и размытость, встроенная в ключевой кадр, но они влияют на текст в div, который я бы хотел оставить незатронутым.

Могу ли я сделать Fade in (и out) и размытие -> фокус (и фокус -> размытие) все в jQuery?

JSFiddle Demo

JS + CSS + HTML

$("#scoreReveal").hover(
 
     function() { 
 
     $("#scoreContainer").toggleClass("scoreFade"); 
 
     } 
 
    );

.bodyoff { 
 
    background-color: #fff; 
 
    background-size: cover; 
 
    height: 100%; 
 
    min-height: 745px; 
 
} 
 
.scoreFade { 
 
    background: url(https://static1.squarespace.com/static/57218055f699bbaf86a7cf0e/t/572603a87da24f738c431828/1462109131805/?format=1500w) no-repeat center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    animation-name: ken-burns; 
 
    animation-duration: 5s; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in-out; 
 
    animation-fill-mode: forwards; 
 
    animation-delay: 0s; 
 
} 
 
@keyframes ken-burns { 
 
    0% { 
 
    opacity: 1; 
 
    -moz-background-size: 100%; 
 
    -o-background-size: 100%; 
 
    -webkit-background-size: 100%; 
 
    background-size: 100%; 
 
    -webkit-filter: blur(0px); 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    -moz-background-size: 110%; 
 
    -o-background-size: 110%; 
 
    -webkit-background-size: 110%; 
 
    background-size: 110%; 
 
    -webkit-filter: blur(0px); 
 
    } 
 
} 
 
h1 { 
 
    padding: 2em; 
 
    color: #444444; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="scoreContainer" class="bodyoff"> 
 
    <div id="scoreReveal"> 
 
    <h1>hello</h1> 
 
    </div> 
 
</div>

Answer 1

Вы можете использовать дополнительный цвет фона с Rgba собственности и изменения альфа цвета, это может помочь вам с эффект непрозрачности.