JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>
<div class="sunset">
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-1">1</a>
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-2">2</a>
    <a href="https://i.imgur.com/l5Qd4we.jpg" data-fancybox="gallery" class="area area-3">3</a>
</div>

SCSS

.sunset {
    width: 100%;
    background-image: url('https://i.imgur.com/l5Qd4we.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    
    &:after { // use padding-top trick for responsive div
        content: ' ';
        display: block;
        padding-top: 120%; // width Ă· height x 100 = ratio
    }
    
    .area {
        position: absolute;
        background-color: rgba(255, 255, 255, 0.5);
        display: block;
        width: 8.5%;
        height: 6%;
        
        &.area-1 {
            right: 18%;
            top: 22.5%;
        }
        
        &.area-2 {
            right: 29.5%;
            top: 38.6%;
        }
        
        &.area-3 {
            top: 53%;
            left: 22.5%;
        }
    }
}