Здравствуйте! Задача не из лёгких, я смог через 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;
}
