[해피CGI][cgimall] Responsive Hex Grid Image Layout

벌집모양 갤러리 디자인으로 사이트 꾸미기에 좋을거 같습니다.
HTML과 CSS로 제작되었습니다.
자세한 내용은 데모를 확인해 주시기 바랍니다.

HTML

<div class="content-wrap">   <h1>Responsive Hex Grid Image Layout</h1>   <h6>( - )</h6>   <p><span style="opacity: 0.8">▼</span><br /><span style="opacity: .6">▼</span><br /><span style="opacity: .4">▼</span><br /><span style="opacity: .2">▼</span></p> </div>   <ul id="hexGrid">   <li class="hex">     <a class="hexIn" href="#">             <h1>This is a title</h1>       <p>Some sample text about the article this hexagon leads to</p>     </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li>   <li class="hex">     <a class="hexIn" href="#">           </a>   </li> </ul>

 

CSS

* {   margin: 0;   padding: 0; } body {   display: flex;   flex-direction: column;   align-items: center;   margin: 0;   padding: 0;   background: #2f4e6f;   overflow-x: hidden; }   .content-wrap {   display: flex;   flex-direction: column;   width: 100%;   justify-content: center;   align-items: center;   text-align: center;   color: #0d84a6;   margin: clamp(4rem, 4vw, 6rem) auto; }   h1 {   font-size: clamp(1.2rem, 6vw, 10rem);   line-height: 0.75;   max-width: 20ch;   padding: 0.1em 0;   text-transform: uppercase;   text-wrap: balance;   background: linear-gradient(     320deg,     #bb1767,     #5231a6,     #1154bf,     #0d85a6,     #1ba373,     #9ed40a,     #1ba373,     #0d85a6,     #1154bf,     #5231a6,     #bb1767   );   background-size: 400% 400%;   -webkit-background-clip: text;   background-clip: text;   color: transparent;   animation: colorCycle 10s ease infinite; } h6 {   font-size: 0.9rem;   font-weight: bold;   color: #a2936f;   text-transform: uppercase;   letter-spacing: 0.2rem; }   @keyframes colorCycle {   0% {     background-position: 0% 50%;   }   50% {     background-position: 100% 50%;   }   100% {     background-position: 0% 50%;   } }   #hexGrid {   overflow: hidden;   width: 90%;   margin: 0 auto;   padding: 0.866% 0;   font-family: "Raleway", sans-serif;   font-size: 15px; } #hexGrid:after {   content: "";   display: block;   clear: both; } .hex {   position: relative;   list-style-type: none;   float: left;   overflow: hidden;   visibility: hidden;   outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */   -webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);   -ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);   transform: rotate(-60deg) skewY(30deg) translatez(-1px); }   .hex * {   position: absolute;   visibility: visible;   outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */ } .hexIn {   display: block;   width: 100%;   height: 100%;   text-align: center;   color: #fff;   overflow: hidden;   -webkit-transform: skewY(-30deg) rotate(60deg);   -ms-transform: skewY(-30deg) rotate(60deg);   transform: skewY(-30deg) rotate(60deg); }   /*** HEX CONTENT **********************************************************************/ .hex img {   left: -100%;   right: -100%;   width: 100%;   height: 100%;   margin: 0 auto;   background-size: cover;   transition: transform 0.6s ease-out;   }   /* Add this new rule for the hover effect */ .hexIn:hover img {transform: scale(1.4)}   .hex h1, .hex p {   width: 102%;   left: -1%;   padding: 5%;   box-sizing: border-box;   background-color: rgba(0, 128, 128, 0.8);   font-weight: 300;   -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.3s ease-out;   transition: transform 0.2s ease-out, opacity 0.3s ease-out; } .hex h1 {   bottom: 50%;   padding-top: 50%;   font-size: 1.5em;   z-index: 1;   -webkit-transform: translateY(-100%) translatez(-1px);   -ms-transform: translateY(-100%) translatez(-1px);   transform: translateY(-100%) translatez(-1px); } .hex h1:after {   content: "";   position: absolute;   bottom: 0;   left: 45%;   width: 10%;   text-align: center;   border-bottom: 1px solid #fff; } .hex p {   top: 50%;   padding-bottom: 50%;   -webkit-transform: translateY(100%) translatez(-1px);   -ms-transform: translateY(100%) translatez(-1px);   transform: translateY(100%) translatez(-1px); }   /*** HOVER EFFECT  **********************************************************************/ .hexIn:hover h1, .hexIn:focus h1, .hexIn:hover p, .hexIn:focus p {   -webkit-transform: translateY(0%) translatez(-1px);   -ms-transform: translateY(0%) translatez(-1px);   transform: translateY(0%) translatez(-1px); }   /*** SPACING AND SIZING *****************************************************************/ @media (min-width: 1201px) {   /* <- 5-4  hexagons per row */   .hex {     width: 19.2%; /* = (100-4) / 5 */     padding-bottom: 22.17%; /* =  width / sin(60deg) */   }   .hex:nth-child(9n + 6),   .hex:nth-child(9n + 7),   .hex:nth-child(9n + 8),   .hex:nth-child(9n + 9) {     margin-top: -4.676%;     margin-bottom: -4.676%;     -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);     -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);     transform: translateX(50%) rotate(-60deg) skewY(30deg);   }   .hex:nth-child(9n + 6):last-child,   .hex:nth-child(9n + 7):last-child,   .hex:nth-child(9n + 8):last-child,   .hex:nth-child(9n + 9):last-child {     margin-bottom: 0;   }   .hex:nth-child(9n + 6) {     margin-left: 0.5%;     clear: left;   }   .hex:nth-child(9n + 10) {     clear: left;   }   .hex:nth-child(9n + 2),   .hex:nth-child(9n + 7) {     margin-left: 1%;     margin-right: 1%;   }   .hex:nth-child(9n + 3),   .hex:nth-child(9n + 4),   .hex:nth-child(9n + 8) {     margin-right: 1%;   } } @media (max-width: 1200px) and (min-width: 901px) {   /* <- 4-3  hexagons per row */   .hex {     width: 24.25%; /* = (100-3) / 4 */     padding-bottom: 28.001%; /* =  width / sin(60deg) */   }   .hex:nth-child(7n + 5),   .hex:nth-child(7n + 6),   .hex:nth-child(7n + 7) {     margin-top: -6.134%;     margin-bottom: -6.134%;     -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);     -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);     transform: translateX(50%) rotate(-60deg) skewY(30deg);   }   .hex:nth-child(7n + 5):last-child,   .hex:nth-child(7n + 6):last-child,   .hex:nth-child(7n + 7):last-child {     margin-bottom: 0;   }   .hex:nth-child(7n + 2),   .hex:nth-child(7n + 6) {     margin-left: 1%;     margin-right: 1%;   }   .hex:nth-child(7n + 3) {     margin-right: 1%;   }   .hex:nth-child(7n + 8) {     clear: left;   }   .hex:nth-child(7n + 5) {     clear: left;     margin-left: 0.5%;   } } @media (max-width: 900px) and (min-width: 601px) {   /* <- 3-2  hexagons per row */   .hex {     width: 32.666%; /* = (100-2) / 3 */     padding-bottom: 37.72%; /* =  width / sin(60) */   }   .hex:nth-child(5n + 4),   .hex:nth-child(5n + 5) {     margin-top: -8.564%;     margin-bottom: -8.564%;     -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);     -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);     transform: translateX(50%) rotate(-60deg) skewY(30deg);   }   .hex:nth-child(5n + 4):last-child,   .hex:nth-child(5n + 5):last-child {     margin-bottom: 0;   }   .hex:nth-child(5n + 4) {     margin-right: 1%;     margin-left: 0.5%;   }   .hex:nth-child(5n + 2) {     margin-left: 1%;     margin-right: 1%;   }   .hex:nth-child(5n + 6) {     clear: left;   } } @media (max-width: 600px) {   /* <- 2-1  hexagons per row */   .hex {     width: 49.5%; /* = (100-1) / 2 */     padding-bottom: 57.158%; /* =  width / sin(60) */   }   .hex:nth-child(3n + 3) {     margin-top: -13.423%;     margin-bottom: -13.423%;     -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);     -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);     transform: translateX(50%) rotate(-60deg) skewY(30deg);   }   .hex:nth-child(3n + 3):last-child {     margin-bottom: 0;   }   .hex:nth-child(3n + 3) {     margin-left: 0.5%;   }   .hex:nth-child(3n + 2) {     margin-left: 1%;   }   .hex:nth-child(3n + 4) {     clear: left;   } } @media (max-width: 400px) {   #hexGrid {     font-size: 13px;   } }