Почему не работает hover:before?

Question

[vladimirr89]

Хочу чтобы при наведении становился полупрозрачным блок image-box. А кнопка подробнее наоборот становилась видимой поверх него. Создал вот такой код

div class="col-md-4 col-xs-12" style="margin-top:15px;">
            <div class="image-box">
                <a href="#" class="image-hover-effect">
                    <img src="/image/catalog/assets/cat/9.jpg" class="img-responsive" alt="image-banner">
                </a>
                <a href="#" class="button our-collections">Подробнее</a> 
            </div>
        </div>

Задал такие стили:

.banner-box .image-box:hover {
background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
}

.banner-box .image-box:hover:before {
background: rgba(255, 255, 255, 0.8);
}

При наведении никакой реакции от image-box, как будто ничего не делал. Сама кнопка "Подробнее" появляется при помощи скрипта, а вот бэкграунд как был так и остается неизменным. Подскажите где я ошибся?

Comments

[Виталий Архипов]

Во-первых, в приведенном вами примере, в css image-box лежит внутри banner-box, а в html такого нет.

Answer 1

[vladimirr89]

В общем нужно было немного по другому подойти и задать before соседнему c img блоком элементу class="image-hover-effect" а далее уже дело техники. Вот готовый результат css

.banner-box .image-hover-effect::before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0)
}

.banner-box .image-hover-effect:hover::before {
background-color: rgba(255, 255, 255, 0.8);
}

Answer 2

[Александр Севиринов]

Если правильно понял, то возможно так:

.banner-box .image-box {
  position: relative;
}

.banner-box .image-box:hover {
  background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.0);
  z-index: 1;
}

.banner-box .image-box:hover:before {
  background: rgba(255, 255, 255, 0.8);
}

.banner-box .image-box:hover .our-collections {
  position: relative;
  z-index: 2;
}

Answer 3

[Дмитрий]

У hover нет after и before. Правильно будет так ::before:hover