* {
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;
}
}
