Sanny333,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<base href="https://xn----7sbbb7bbx7alc6h.xn--p1ai/" />
<style type="text/css">
body {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.portfolio__bl__img {
margin-bottom: 20px;
overflow: hidden;
position: relative;
width: 200px;
height: 250px;
}
.portfolio__bl__img::before {
content: '';
position: absolute;
background-color: #19b4ee;
-webkit-transition: 0.25s all ease-in-out;
-o-transition: 0.25s all ease-in-out;
transition: 0.25s all ease-in-out;
height: 7px;
width: 0;
bottom: 0;
right: 0;
left: 0;
}
.portfolio__bl:hover .portfolio__bl__img::before {
width: 200px;
background-color: var(--color, #19b4ee);
}
.portfolio__bl:hover .portfolio__bl__title>span {
background-color: var(--color, #19b4ee);
}
.portfolio__bl:hover a.portfolio__cont__in {
text-decoration: none;
color: rgba(255, 255, 255, 1);
}
.portfolio__bl a.portfolio__cont__in {
line-height: 1;
text-align: center;
}
.portfolio__bl {
width: 200px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const colors = ['#8d67c3', '#f376a2', '#4263a8', '#19b4ee'],
len = colors.length;
document.querySelectorAll(".portfolio__bl").forEach((div, i) =>{
i = 0;
div.addEventListener("mouseenter", _ => div.style.setProperty("--color", colors[i++ % len]))
});
});
</script>
</head>
<body>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
<div class="portfolio__bl wow slideInUp" style="visibility: visible; animation-name: slideInUp;">
<a href="#" class="portfolio__cont__in">
<div class="portfolio__bl__img">
<img class="lazy" data-src="/images/portfolio/sarmat2.jpg" alt="Продвмжение ЖК «Сармат»" src="/images/portfolio/sarmat2.jpg">
</div>
<div class="portfolio__bl__title">
<span data-current="0" style="">Комплексное продвижение застройщика с первого этапа проектирования</span>
</div>
</a>
</div>
</body>
</html>