Органическая форма с CSS для эффекта наложения на изображения
#html #css #css3 #svg
У меня есть задача по изображению органической формы.
Я хочу, чтобы фоновый цвет при наведении был, как изображение определенной органической
формы.
Но, я не получаю эффект наведения на изображении с цветом фона.
Я много пробовал, но он не получается, где я делаю неправильно?
Может кто-нибудь указать правильное направление, чтобы решить мою проблему? Заранее
спасибо...
.at-organic-shape {
position: relative;
height: 500px;
width: 500px;
}
.at-organic-shape figure img:hover {
background-color: #6495ED;
border-radius: 35% 80% 65% 70%/50% 65% 70% 85%;
transition: all 0.5s linear;
}
Ответы
Ответ 1
Я всё правильно понял - есть картинка с прозрачностью (.png) и нужно её "замонохромить"
определённым цветом? Если да, то как вариант:
img {
transition: -webkit-filter 0.4s ease-out, filter 0.4s ease-out;
}
img:hover {
--hue: 140deg;
-webkit-filter: grayscale(1) sepia(1) hue-rotate(var(--hue)) saturate(2);
filter: grayscale(1) sepia(1) hue-rotate(var(--hue)) saturate(2);
}
input[type="range"] {
-webkit-appearance: none;
display: inline-block;
width: 336px;
background: hsl(180, 80%, 65%);
}
span {
display: inline-block;
height: 2em;
border: 0px dotted #090;
vertical-align: middle;
}
hue-rotate(140deg)
Вся "магия" в строчке с фильтрами, остальной код для украшательства.
Ответ 2
Вы можете попытаться использовать псевдоэлемент и режим mix-blend-mode, чтобы скрыть
переполнение цвета:
.at-organic-shape {
position: relative;
height: 500px;
width: 500px;
}
.at-organic-shape figure {
position:relative;
background:#fff;
}
.at-organic-shape figure:after {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:transparent;
mix-blend-mode: color;
transition: all 0.5s linear;
}
.at-organic-shape figure:hover::after {
background:#6495ED;
}
Комментариев нет:
Отправить комментарий