html - Make each image Clickable to enlarge in a collage

Question

I have this image (single) in my static HTML website. I want a feature in which user will be able to click on every image and it will be enlarged like a slideshow. Can this be possible via HTML/CSS/JS?

question from:https://stackoverflow.com/questions/65949721/make-each-image-clickable-to-enlarge-in-a-collage

Answer 1

Yes, this is entirely possible.

Please consider using Image Map capability of HTML5 for this. It is widely being used to create clickable areas on the images. This is the crux of your question and I don't believe your actual problem is about "enlarging images like a slideshow".

HTML Image Maps

There are tons of CodePens available on the internet which demonstrates the examples for Image Maps. Derek's example here could come in handy.

Responsive Image Map Demo

<div class="pyramid">
    <img src="https://res.cloudinary.com/.../pyramid_1_fu4idd.png" usemap="#Map" />
    <map name="Map" id="Map">
        <area href="#" shape="poly" class="brick 1" coords="669,0,405,268,931,265" />
        <area href="#" shape="poly" class="brick 2" coords="399,269,681,268,673,468,227,455" />
        <!-- More area tags here -->
    </map>
</div>