Hello. Tell me how to implement something like that. See the picture. When hovering over a red block, the vertical bar below it changes the transparency. The problem is that the translucent background occupies 100% of the window width alt text Thanks for the advice.

    2 answers 2

    In css, you can prescribe a background for a block in RGBA format, that is, consider not only the background color, but also its transparency. And this transparency will not affect the content in contrast to the opacity parameter.

    In css you get these styles:

     .container-item { background-color: rgba(255,255,255,0.4); /* 255, 255, 255 это белый цвет в RGB, 0.4 полупрозрачность 40%, методом тыка можно подобрать нужную */ transition: background 0.3s linear; /* Для более плавного изменения прозрачности можно добавить transition */ } .container-item:hover { background-color: rgba(255,255,255,0); /* Background пропадает */ }
    • This is all clear. This is the alphabet. The question is that the whole large block is semitransparent (for the entire background image), i.e. you need to either change the transparency of its part (strip), or make a separate semi-transparent background for the block with red dies (fixed width) and for a wide semi-transparent substrate (which width is 100%), but how? This is not Photoshop, there are no masks here. - rebroff
    • The background image is separate (outer container), the blocks with dies separately on top of the background image according to the height of the external block. And the option of changing the background when hovering exactly on the plate, and not on the entire block with the plate, was written to you by @Deonis - MasterAlex
    • I guess I can not clearly explain. The picture with the houses is irrelevant. I don't talk about it at all. There is a translucent overlay block A, which occupies the entire width of the browser window. There is a block of fixed width - block B, which is placed in the center and which contains 4 blocks with red dies - block B. When I hover over block B, I change its transparency to 100% - this is understandable, but it is also with my parent, block B , is located inside a large (100% window width) block A, which is also opaque. Those. the whole space of the width of the window is opaque, and not just blocks with fixed widths. - rebroff
    • one
      I understand you, you need to make 3 columns, where the central column is a block with red dies, and the left and right are the same as dies translucent ears, as an option try option number 7 for your ears: htmlbook.ru/samlayout/tipovye-makety / ... - MasterAlex
    • Yes, thanks, I will try. - rebroff

    @rebroff , if you need to show a strip when you hover on a pink block, then you need to connect JS. And if there is enough guidance on the strip itself, then you can do it this way :

     #wrapper { display: flex; height: 100vh; } #wrapper > div { flex: 1 0 auto; text-align: center; border: 1px solid #999; background: rgba(255, 255, 255, .5); } #wrapper > div:hover { background: rgba(255, 255, 255, 0); } #wrapper > div:before { display: inline-block; height: 100%; content:''; vertical-align: middle; } .red { /* ваши розовые блоки */ display: inline-block; width: 90%; height: 200px; background: #de4f4f; vertical-align: middle; }
    • The fact is that there is a block with dies, and to the right and to the left of it is a translucent background. Those. not only the block-strips containing the dies are filled with translucency, but the entire width of the browser window on the right and left. - rebroff
    • @rebroff, well, let yourself be dies with red blocks will be in the middle, and leave the rest as is. For example, [like this] [1] we get two dies with red blocks and reacting to: hover, and the space around the edges smokes to the side. Or I can not understand what you see the complexity. [1]: jsfiddle.net/bree6dr3/4 - Deonis
    • @Deonis, I understand the fixed-width dies will be, for the picture is MasterAlex
    • @MasterAlex, no, you did not understand correctly. They will be rubber and height and width. Could themselves check) - Deonis
    • @Deonis, I think that you misunderstood my words, you have all the rubber, there is nowhere else, but the author must be fixed in width. - MasterAlex