When I added a caption to my image, it only appeared when hovering over the symbol in the image. However, this feature doesn't work on mobile or tablet due to the image size. How can I make the caption appear when the image is clicked on mobile/tablet devices?
For example, I would like the caption to pop up outside of the image when it is clicked, similar to this: https://i.sstatic.net/uS6FJ.jpg
Thank you!
HTML
<div class="col-5 col-sm-2 ml-auto aboutMid aboutMid1">
<figure class="cap-left">
<img src="assets/about/about1.jpg" class="img-fluid">
<figcaption>
The house is a converted farm building featuring traditional wooden shutters and terracotta toof tiles
</figcaption>
</figure>
</div>
CSS
figure {
display: block;
position: relative;
overflow: hidden;
}
figcaption {
position: absolute;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 20px;
opacity: 0;
bottom: 0;
left: -30%;
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
}
figure:hover figcaption {
opacity: 0.9;
left: 0;
font-size: 1em;
}
Javascript (imported from Bootstrap)
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>