It is necessary to impose a similar block:
I understand that SVG is required here, but so far these elements have quickly flipped into the forehead (the elements start with "Dry mixes" and clockwise):
div.data { height: 720px; padding-top: 90px; box-sizing: border-box; position: relative; } ul { width: 550px; height: 530px; margin: 0 auto; position: relative; } ul li { position: absolute; z-index: 1; } ul li:hover { z-index: 2; } ul li a { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; position: absolute; top: 0; left: 0; z-index: 1; } ul li a::before { content: ""; width: 100%; height: 100%; background: url("/images/bg/bg-about-item.png") no-repeat center center; transition: background 0.3s; position: absolute; top: 0; left: 0; z-index: 1; } ul li a:hover::before { background: url("/images/bg/bg-about-item-hover.png") no-repeat center center; } ul li a span { font-size: 16px; color: #fff; position: relative; z-index: 2; } ul li:nth-child(1) { top: 0; right: 92px; } ul li:nth-child(2) { top: 157px; right: 0; } ul li:nth-child(3) { bottom: 7px; right: 92px; } ul li:nth-child(4) { bottom: 7px; left: 94px; } ul li:nth-child(5) { top: 155px; left: 4px; } ul li:nth-child(6) { top: 0; left: 94px; } <div class="data"> <ul> <li> <img src="/images/content/cat01.png" alt="" /> <a href="#!"> <span>Сухие строительные смеси</span> </a> </li> <li> <img src="/images/content/cat02.png" alt="" /> <a href="#!"> <span>Тротуарная плитка из бетона</span> </a> </li> <li> <img src="/images/content/cat03.png" alt="" /> <a href="#!"> <span>Тротуарная плитка из резины</span> </a> </li> <li> <img src="/images/content/cat04.png" alt="" /> <a href="#!"> <span>Металлоконструкции</span> </a> </li> <li> <img src="/images/content/cat05.png" alt="" /> <a href="#!"> <span>Облицовочный кирпич</span> </a> </li> <li> <img src="/images/content/cat06.png" alt="" /> <a href="#!"> <span>Теплоблок</span> </a> </li> </ul> </div> It makes no sense to run, there are no pictures) But if necessary, I will add.
Each block now on the outer layer has a blackout effect in the form of a translucent png-picture, which changes when you hover on a translucent yellow.
And now the actual questions are: how to impose on the SVG with the filling of each figure with a picture and text (no static, everything changes through the admin area), whether the pseudo-element ::before will work for such figures (in theory it should), and also separate the image in the center element (now there is a logo that is absolute relative to the parent, I don’t show it, for customers)?
PS I don’t draw SVG myself ((I tried to copy examples, but I don’t understand how to manage the coordinates of the points, there’s no grid in my head, and how to push the text there, even more so.
PSS You can just kick in the right direction, for example, how to draw 6-squares for given size of the sidebox.
PSSS I would be glad if Alexandr_TT looked in at the question;)
