Hello, I decided to make a website using a template from wix.com, I'm just learning, so I can’t figure out how to make a block with a picture appear yellow with opacity 0.6 somewhere and at the same time so that this picture would be a link to yourself but in the gallery window from fancybox. My yellow fill already costs through hover , but the picture does not work as a link, if I remove the hover , the link becomes active and the gallery works as intended.

Here is a link to the site template

The "About Us" tab, below is a photo of the team, when you hover over them with the mouse, they are filled with yellow, and there is no block with the text, it works for me, but the link in the picture to the gallery does not work as in the original template.

Here is the code:

 .im { width: 240px; height: 198px; margin-bottom: 5px; border: none; position: relative; } .im:hover { transition: all .5s; background: yellow; content: " "; opacity: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } div:hover .im:after { opacity: .6; } .emp1, .empinfo1 { padding-left: 10px; } .emp1 { font-family: play, sans-serif; margin-top: 5px; padding-top: 15px; background-color: #CFCFCF; display: block; position: absolute; width: 230.2px; height: 29px; color: #FFFFFF; font-size: 19px; } 
 <tr> <td id="td1"> <div id="line1block7"> <div class="im"> <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"> <img src="images/com_1.jpg" width="240px" height="198px"> </a> </div> <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> </td> </div>

Please help me understand, otherwise I will sit on this point for another two weeks.

  • Like the link works .. - Yuri
  • the link is given to the original template from wix, the link on my site does not work if there is a hover, when I remove the hover, then the link becomes working - Alexander Pristupa
  • Well, how can it be that because of the style the link doesn't work? - Yuri
  • Yes, I understand that because of it, how to make it so that the style and the link would work, what do you need to change in the code? - Alexander Pristupa
  • Well, the link can not work because of the style. Try to remove .im:hover position: absolute - Yuri

3 answers 3

.im: hover {
opacity: 0; / It says that when you hover on im it will become completely transparent (i.e. invisible) /
}

div: hover .im: after {
opacity: .6; / In this case, the application of transparency is applied to the after pseudo-class which is not indicated anywhere in the provided code, and is used only when hovering over a div /
}

Most likely you have an error here .im:hover { probably should be .im:after { and if you specify the position of the element, two indicators are enough, for example top: 0; left: 0; top: 0; left: 0; if you want to center the element, use the margin for this

    In principle, the block itself with the image is relative and another block is absolutely positioned on it, you can simply with any color and opacity , here is an example. If I suddenly do not understand the essence of the question, write and I will finish

     * { margin: 0; padding: 0; box-sizing: border-box; } img { display: block; width: 100%; } .card { width: 240px; margin: 20px; } .images_container { position: relative; } .yellow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: transparent; } .card:hover .yellow { background: red; opacity: .2; cursor: pointer; } .text p:first-child { font-weight: 900; padding: 5px 0; } .text p:nth-of-type(2) { background: lightblue; font-size: 14px; font-weight: 900; font-style: italic; } .text p:nth-of-type(3) { font-size: 16px; font-style: italic; } 
     <div class="card"> <div class="images_container"> <img src="https://static.wixstatic.com/media/11d79d_b224ea3b545a4d6cb2e6d468e2558814.jpg/v1/fill/w_441,h_383,al_c,q_90,usm_0.66_1.00_0.01/11d79d_b224ea3b545a4d6cb2e6d468e2558814.webp" alt=""> <div class="yellow"></div> </div> <div class="text"> <p>Тамара Миронова</p> <p>Менеджер по работе с клиентами</p> <p>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p> </div> </div>

    • you can make this effect easier without creating extra classes - Yuri
    • @Yuri I know ... - user33274

    Everything, I figured out the code yesterday, everything worked as it should, thanks to all for the help, most likely I wouldn't have figured out without you) Here is the working code, can someone come in handy:

     .im{ width: 240px; height: 198px; margin-bottom: 5px; border: none; background: yellow; } .im:hover .gallery{ transition:all .5s; background: yellow; content: " "; } div:hover .gallery{ transition:all .5s; background: yellow; content: " "; opacity: .6; } 
     <div id="line1block7"> <div class="im"> <a class="gallery" rel="group" href="images/com_1big.jpg" width="240px" height="198px"><img src="images/com_1.jpg" width="240px" height="198px"></a></div> <span class="emp1">Юлия Соколова</span><span class="empinfo1"><p class="text1">Руководитель студии<br><br>Это текст. Кликните дважды, чтобы отредактировать его. Расскажите посетителям сайта о себе, своих услугах и преимуществах.</p></span> </td> </div>