Full screen an image

Question

I'm making a webpage in which i'm showing some data from databse using laravel. Code below

the webpage view - image1

what i want to do - i want to make the dv go fullscreen on click like this - image

page code

<div class="container">
    <div class="boxmk">
        @foreach($kk as $jp)
        <div class="screenshots-card">
           <div class="ScreenShots-root">
              <div class="screenshot-card">
                 <div class="screenshot-card-header">
                    
                    <div class="screenshot-card-header-name">{{$jp->appname}}</div>
                 </div>
                 <div class="screenshot-card-image"><img alt="User Screenshot" class="screenshot-card-thumbnail-image" src="{{ URL::to('screenshots/'.$jp->filename) }}"></div>
                 <div class="screenshot-card-footer">
                    <div class="screenshot-card-footer-information-bar">
                       
                       <div class="screenshot-card-footer-information-bar-timer">
                          <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                             <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"></path>
                          </svg>
                          <span class="screenshot-card-footer-information-bar-timer-time">{{$jp->time}}</span>
                       </div>
                    </div>
                 </div>
              </div>
              

           </div>
        </div>
        @endforeach            
     </div>

css

<link rel="stylesheet" href="https://app.workfolio.io/static/css/main.05c50221.chunk.css">
  <link href="https://app.workfolio.io/static/css/2.be6d2076.chunk.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

Answer 1

If you are using Bootstrap, such overlay functionality is readily available. You can use Bootstrap Modals for such implementations. See here for the documentation. When the user clicks on the image, you could launch a modal which shows a greater version of the chosen image.