Как удалить дополнительный слой наложения на элемент p?

У меня есть изображение опрокидывания, которое добавляет оверлей, когда пользователь зависает.
Я также показываю текст «Shop Now» поверх изображения, когда пользователь наводил на него изображение.
Моя проблема заключается в том, что когда пользователь наводится на изображение, на div добавляется оверлей, содержащий изображение, а также текст «Показать сейчас».
Это делает текст «Магазин сейчас» более темным, так как он имеет два наложения.

Как удалить дополнительный слой в тексте «Shop Now»?
Как удалить дополнительный слой наложения на элемент p?

Это мой CSS:

.banner-box{ 
    width:313px; 
    height:313px; 

} 

/*banner overlay*/ 


div.homepage-popular-categories { 
    position: relative; 
    display: inline-block; 
} 

div.homepage-popular-categories:hover p { 
    background: rgba(0,0,0,0.5); 
} 

div.homepage-popular-categories p:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 

div.homepage-popular-categories p { 
    position: absolute; 
    background: rgba(0,0,0,0); 
    top: 0; 
    bottom: 0; 
    margin: 0; 
    width: 100%; 
    color: #eeeeec; 
    text-align: center; 
    font-family: sans-serif; 
    font-size: 1.5em; 
    font-weight: bold; 
    transition: 0.5s; 
    opacity: 1; 
} 




div.homepage-popular-categories:hover .shop-now-button { 
    visibility:visible; 


} 
div.homepage-popular-categories .shop-now-button { 
    border-radius: 25px; 
    border: 3px solid #fff; 
    left: 0; 
    right: 0; 
    top: 28%; 
    bottom: 0; 
    max-height: 40px; 
    margin: auto; 
    padding-top:20px; 
    box-sizing: border-box; 
    max-width: 125px; 
    font-size:1em; 
    padding-top:5px; 
    background: rgba(0,0,0,0); 
    visibility:hidden; 
} 

/*end banner overlay*/

Это мой HTML

<a href="#"> 
    <div id="ipad-width1" class="grid12-4 banner strov-3-banners shop-by-goal banner-box homepage-popular-categories "> 
    <p>SHOP BY GOAL</p> 
    <p class="shop-now-button">Shop Now</p> 
    </div> 
</a> 
<a href="#"> 
    <div class="grid12-4 banner strov-3-banners trending banner-box homepage-popular-categories "> 
    <p>TRENDING</p> 
    <p class="shop-now-button">Shop Now</p> 
    </div> 
</a> 
<a href="#"> 
    <div id="ipad-width3" class="grid12-4 banner strov-3-banners new-arrivals banner-box homepage-popular-categories "> 
    <p>NEW ARRIVALS</p> 
<p class="shop-now-button">Shop Now</p> 
    </div> 
</a>

Вот моя скрипка:
https://jsfiddle.net/a75wbabp/

овала с текстом Магазин должны теперь выглядеть следующим образом

источник

2016-09-29 altoids

Почему тег JavaScript? – j08691

@ j08691 Моя ошибка, я изменил его на css – altoids

Добавить CSS сразу после :hover правил:

div.homepage-popular-categories:hover .shop-now-button { 
    background: rgba(0,0,0,0); 
}

Проблема кнопка наследует цвет фона контейнера для какой-то странной причине. Это обеспечит его прозрачность.

источник

2016-09-29 18:04:24

Вы должны добавить это к .shop-now-button по наведению

background: transparent;

Проверьте скрипку https://jsfiddle.net/Pranesh456/3uszm3o7/1/

источник

2016-09-29 18:06:12

Как удалить дополнительный слой наложения на элемент p?

ответ

Смежные вопросы