Hello! I'm trying to make a picture on which the text is clickable, but it is not clickable, only the link in it is clickable (New products and more). I <a href="/newproducts"> in front of the <div class="col-sm-3 homeBanner"> , the element of the image is not clickable anyway.

 <div class="col-sm-3 homeBanner"> <div class="row"> <a href="/newproducts"> <img class="bgImage" src="/Content/Images/uploaded/homebanner-1.png" alt="" width="293" height="180" /> </a> <div class="row m0 bannerTextArea"> <div class="row m0 bannerTextAreaInner"> <h4>Новые товары</h4> <h5><a href="/newproducts">подробнее</a></h5> </div> </div> </div> </div>

enter image description here

  • Can I see the CSS code? - Yuri

1 answer 1

Option 1 - pointer-events: none; - Can I use

 .b, .b-pict { display: inline-block; vertical-align: top; position: relative; } .b-text { opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); text-align: center; transition: 0.3s; pointer-events: none; } .b:hover .b-text { opacity: 1; } 
 <div class="b"> <a href="https://www.google.com.ru" class="b-pict"> <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcTXg1oZXhnADWrRUFJnyfaVdR1RI0yNEQSv4pp81lUyKEajafJQ" alt=""> </a> <div class="b-text"> text </div> </div>

Option 2 - use the a tag for the whole block

 <a href="/newproducts"> <img class="bgImage" src="/Content/Images/uploaded/homebanner-1.png" alt="" width="293" height="180" /> <div class="b-text"> <h4>Новые товары</h4> <h5>подробнее</h5> </div> </a>
  • He wrote that he tried the second one and for some reason it did not work - Yuri
  • in tag 'a' there should not be an embedded tag 'a' - soledar10
  • I know it. He wrote that he rearranged the link for <div class="col-sm-3 homeBanner"> and did not work - Yuri