Responsive Image Grid WIP
<!DOCTYPE html>
<html lang="en">
<head>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<style>
  margin: 20px;
body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
.w3-quarter img{margin-bottom: -6px; cursor: pointer}
.w3-quarter img:hover{opacity: 0.6; transition: 0.3s}
</style>
</head>
</header>

<!-- Overlay effect when opening sidebar on small screens -->
<div class="w3-overlay w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>

<!-- !PAGE CONTENT! -->
<div class="w3-main w3-content" style="max-width:1600px;margin-top:83px">
  
  <!-- Photo grid -->
  <div class="w3-row w3-grayscale-min">
    <div class="w3-quarter">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Canoeing again">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
   </div>
    
   <div class="w3-quarter">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Nature again.. At its finest!">
    </div>
    
    <div class="w3-quarter">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Waiting for the bus in the desert">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="What a beautiful scenery this sunset">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="The Beach. Me. Alone. Beautiful">
    </div>

    <div class="w3-quarter">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="A boy surrounded by beautiful nature">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="A girl, and a train passing">
      <img src="https://cdn.shopify.com/s/files/1/0011/7463/4540/products/AccessoriesStyle_1_1800x1800.png?v=1659284508" style="width:100%" onclick="onClick(this)" alt="Quiet day at the beach. Cold, but beautiful">
    </div>
  </div>

  <!-- Modal for full size images on click-->
  <div id="modal01" class="w3-modal w3-black" style="padding-top:0" onclick="this.style.display='none'">
    <span class="w3-button w3-black w3-xlarge w3-display-topright">×</span>
    <div class="w3-modal-content w3-animate-zoom w3-center w3-transparent w3-padding-64">
      <img id="img01" class="w3-image">
      <p id="caption"></p>
    </div>
  </div>

<!-- End page content -->
</div>

<script>
// Modal Image Gallery
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  var captionText = document.getElementById("caption");
  captionText.innerHTML = element.alt;
}

</script>


</body>
</html>
/* ESLint rules https://eslint.org/docs/2.0.0/rules/ */
/* eslint no-undef: "off" */

Responsive Image Grid WIP

  • Archivos
  • Index
  • Style
  • Script
  • README
  • CDN Agregar
HTML
PLEASE WAIT...