У меня проблема с созданием эффекта наведения на изображение PNG и CSS. Как показано на рисунке ниже, изображение представляет собой треугольную выемку. Я пытаюсь сделать так, чтобы цвет фона расширялся влево от изображения и не перекрывал его, как это происходит в моем примере.
Наведите фон и изображение
.parent-1:hover, .parent-2:hover, .parent-3:hover {
background: #993408 url(/images/brown-notch.png) no-repeat right;
background-size: contain;
position: relative;
padding-left: 10px;
color: #fff !important;
z-index: 1;
}
Есть ли способ сделать фон в конце, где изображение начинается, чтобы он стал стрелкой и был отзывчивым? Я попытался это сделать, но он не работает быстро:
.parent-1:hover::before, .parent-2:hover::before, .parent-3:hover::before {
content: '';
background-color: #993408;
background-position: left;
position: absolute;
display: block;
left: 0;
z-index: -1;
font-size: 1rem;
width: 96%;
height: 100%;
}