I'm seeking some help with a Bootstrap image gallery I'm developing. In my portfolio, there are several images displayed, and when hovered over, an "overlay" appears with an icon that users can click to open a Lightbox;
<div class="container-fluid full-width">
<div class="row row-no-gutter">
<div class="col-md-push-0 col-md-12 col-sm-12 col-sm-push-0 content">
<div class="isotope_items">
<div class="single_item link web-design col-md-3 col-sm-6 col-xs-12">
<div class="work-inner">
<div class="work-overlay">
<div class="overlay-in">
<div class="work-info">
<div class="work-links">
<a href="images/work-1.jpg" class="image-link lightbox"><i data-icon="W" class="icon" style="color:white"></i></a>
</div>
</div>
</div>
</div>
<a href="images/work-1.jpg" class="image-link lightbox"><img src="images/work-1.jpg" class="img-full-width" alt="" ></a>
</div>
</div>
</div>Relevant CSS;
.work-inner {
position: relative;
}
.work-overlay {
position: absolute;
color: #fff;
width: 100%;
height: 100%;
text-align: center;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.overlay-in {
display: table;
height: 100%;
width: 100%;
}
... (CSS continuation)
The issue is that only the icon is clickable, causing problems on mobile devices where accurate clicking is difficult. I want the entire image to be clickable instead of just the data icon.
Updated code - Apologies for the length!