modal box pointing to the image when hover-CodePudding

I appreciate all the contribution on this site.

I have now encountered a scenario and i need to make the modal box appear when i hover into the image.

This is my code so far.

.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ }

.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%; }

and this will be the ideal design.

Is there any chance that I can make this like floating and outside those grid box?

for example, this will be my html that is inside those grid containers but it a Php embedded code to loop all the data.

@foreach($samples as $sample)
<div class = "sample1">
   <img class = "sample2"> </img>  
</div>

CodePudding user response：