Как размыть фоновое изображение при наведении, но не текст

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

Как видите, у меня есть идентификатор c1, и я использовал функцию javascript для отображения текста при наведении курсора, и это прекрасно работает.

Теперь я хочу использовать css/javascript для размытия фонового изображения без размытия текста. Это возможно?

Мой CSS:

#c1 {
    float: left;
    width: 300px;
    padding: 30px;
    margin: 15px;
    background-image: url(images/cd.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    height: 150px;
}

#c1:hover {
    -webkit-filter: blur(5px);
}

Мой HTML:

<div id="productos">
    <a name="jproductos"></a>
    <ul>
        <div id="c1">
        </div>
    </ul>
</div>

javascript text image blur css
person Khalil Najjar    schedule 20.07.2015    source источник
comment
Халид, чтобы принять ответ, вы можете щелкнуть галочку рядом с ответом, пока она не станет зеленой. 15 баллов ответившему и бейдж вам :)   -  person Rachel Gallen    schedule 20.07.2015

Ответы (2)


arrow_upward
0
arrow_downward

Вам придется структурировать свой html по-другому. Если вы сделаете относительный контейнер и поместите изображение как отдельный div от текста:

<div class="container">
    <div class="image"></div>
    <div class="text">Text</div>
</div>

.container{
    position: relative;
}

.image, .text{
    position: absolute;
    top: 0;
    left: 0;
}

.image{
    -webkit-filter: blur(5px);
}

Таким образом, текст и изображение не являются родительским/дочерним/одним и тем же элементом, и вы можете размыть только изображение, но при этом текст будет выглядеть так, как будто он находится на изображении.

person Kevin F    schedule 20.07.2015

arrow_upward

arrow_downward

person    schedule
comment
Это работает очень хорошо! Большое спасибо. Теперь происходит то, что когда я навожу курсор на текст, он (текст) исчезает. Если это можно исправить, буду очень признателен! :D - person Khalil Najjar; 20.07.2015