JSFiddle - React, Tailwind, and code Playground
by von
HTML
<!DOCTYPE html><br> <html lang="en"><br> <head><br> <meta charset="UTF-8"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <br> <style><br> html {<br> scroll-behavior: smooth;<br> }<br><br> main *,<br> main *::after,<br> main *::before {<br> margin: 0;<br> padding: 0;<br> box-sizing: border-box;<br> }<br><br> .gallery {<br> display: flex;<br> flex-wrap: wrap;<br> }<br><br> figure {<br> width: 200px;<br> cursor: pointer;<br> margin: 10px;<br> }<br><br> figure .image {<br> width: 200px;<br> height: 200px;<br> object-fit: cover;<br> display: block;<br> pointer-events: none;<br> }<br><br> .image-span {<br> position: relative;<br> display: block;<br> pointer-events: none;<br> }<br><br> .image-span::after {<br> content: "";<br> display: block;<br> position: absolute;<br> top: 0;<br> left: 0;<br> bottom: 0;<br> right: 0;<br> width: 100%;<br> height: 100%;<br> background-image: url("mag-icon.png");<br> background-position: 100% 100%;<br> background-size:30%;<br> background-repeat: no-repeat;<br> pointer-events: none;<br> }<br><br> figure figcaption {<br> text-align: center;<br> pointer-events: none;<br> font-weight: bold;<br> }<br><br> figure p {<br> text-align: justify;<br> }<br><br> .mid-div {<br> position: absolute;<br> top: 50%;<br> }<br><br> .modal {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> position: fixed;<br> top: 0;<br> bottom: 0;<br> left: 0;<br> right: 0;<br> background-color: rgba(0, 0, 0, 0.3);<br> z-index: 1;<br> }<br><br> .modal.hide {<br> display: none;<br> }<br><br> .modal-box {<br> max-width: 80%;<br> max-height: 80%;<br> background-color: wheat;<br> position: relative;<br> }<br><br> .modal-image {<br> width: 100%;<br> height: 100%;<br> object-fit: contain;<br> }<br><br> .close {<br> position: absolute;<br> top: 5px;<br> right: 5px;<br> color: white;<br> text-shadow: 0 0 0 dimgray;<br> cursor: pointer;<br>...