Почему некорректно работает добавление блока при наведении CSS?

Question

[Иван Смирнов]

Здравствуйте! Задача не из лёгких, я смог через display: block добавить элемент при наведении, но когда курсор попадает на появившийся элемент (в моём случае это текст), то эффекты которые появляются при наведении на блок (в моём случае это приближение картинки и последующий blur эффект) перестают работать.

Прошу помогите :) Сайт на котором можете просмореть проблему.

<div class="col-sm-6 col-md-6 col-lg-6">
                <div class="blog">
                    <a href="/blog">
                        <img src="img/LOGO.jpg" alt="" class="img-responsive">
                        <div class="block">
                            <h2>T_H</h2>
                        </div>
                    </a>
                </div>
            </div>

.blog {
    overflow: hidden;
    margin-top: 1vw;
}

.blog img {
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
 }
 
.blog img:hover {
    filter: blur(10px);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    
 }

.block {
    position: absolute;
    text-align: center;
    left: 0;
    bottom: 0;
    right: 0;
    display: none;
}

.block h2 {
    font-size: 3vw;
    color: #fff;
}

.blog:hover .block{
    display: block;
}

Answer 1

[Полина Емельянова]

Так оставьте img в покое.

.blog:hover img - поменяйте. Должно сработать

Вы не правильно задали цель ховера, вот и все.

Comments

[Иван Смирнов]

Спасибо, всё заработало, результат можете сами увидеть зайдя на сайт :)

[Полина Емельянова]

Иван Смирнов: КРУТОТЕНЬ!!!!)))
ЗЫ Только заметила - картинку сами рисовали для личного сайта?

И на сайте с муфтами блок "РЕИМУЩЕСТВА МЕХАНИЧЕСКОГО СОЕДИНЕНИЯ RECO" - там что-то должно быть справа, да?

(сорри за офтоп)

[Иван Смирнов]

Полина Емельянова: Там должна была быть картинка, просто сейчас ее нет в папке.
Давно сайтами занимаетесь:?