im attempting to create a custom gallery on shopify, I've already figured out how to enlarge the image on hover but i want it to expand to most of the screen when clicked. and i want it to have a small exit button or disappear whenever the website is clicked outside of the image
<style><!--
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
#gallery {
line-height:0;
-webkit-column-count:5; /* split it into 5 columns */
-webkit-column-gap:5px; /* give it a 5px gap between columns */
-moz-column-count:5;
-moz-column-gap:5px;
column-count:5;
column-gap:5px;
}
#gallery img {
width: 100% !important;
height: auto !important;
margin-bottom:5px; /* to match column gap */
}
@media (max-width: 1200px) {
#gallery {
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
}
}
img {
border-radius: 7%;
--></style>
<meta charset="utf-8" />Image Gallery<meta name="description" content="Responsive Image
<style type="text/css"><!--
--></style>
<div id="gallery"><img src="myimage.jpg" /></div>
