Been grappling with this issue for the past few days and just can't seem to find a solution. I have an image, a rollover image, and text underneath. The text links work fine, but for some reason, the images are not linking. I've tried adjusting the z-level without success. Hopefully, someone can offer some assistance.
<div class="col-md-10 col-md-offset-1">
<div class="row" id="societies-cards">
<div class="col-sm-6 col-lg-4">
<div class="thumbnail">
<div class="card-image"><a href="/join/"><img alt="Join" class="card-img-top" src="/join.jpg" /> </a>
<div class="image-overlay"><a href="/join/"> </a></div>
<a href="/join/"> </a></div>
<div class="caption">
<h3 class="text-center"><a href="/join/">JOIN</a></h3>
</div>
</div>
</div>
The above HTML code pertains to the image - the classes help organize the content on the page, with the card image being the main image displayed. The overlay appears when hovering over the image, and the caption is what shows below it. I've edited the links for confidentiality, but you should still get the gist of it.
Below is the CSS related to the image:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background: rgba(0, 0, 0, 0.4);
and
z-index: -1;
width: 100%;
}
#societies-cards .thumbnail .caption {
background-color: white;
box-shadow: 0px -8px 10px -1px white;
z-index: 1;
position: relative;
width: 100%;
Thank you to anyone willing to dive into this jumbled mess of words - as someone learning on the go and not being the original creator of this page, it's been quite a challenge unraveling certain aspects.