I have 8 hexagons made purely with HTML and CSS and the code is taken from this example. However, I have inserted my own images in them.
Problem:
They all change sizes each time I click any of them.
Functionality:
I am showing different information on the other half of the page corresponding to each of the hexagons when clicked using useState React hook. Would that be the cause?
What I've tried:
- The code is using
%in CSS so, I changed it topixelsthinking it's a responsiveness issue but that didn't help - I used some other examples too however, that didn't help either
Expected:
When clicked on any hexagon, sizes shouldn't change
My first time posting so hope the structure above is as expected. Any help or tips will be much appreciated. Thanks
#hexGrid {
display: flex;
flex-wrap: wrap;
padding-left:0px;
width: 45%;
overflow: hidden;
font-size: 15px;
list-style-type: none;
}
.hex {
position: relative;
visibility:hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hex::after{
content:'';
display:block;
padding-bottom: 86.602%; /* = 100 / tan(60) * 1.5 */
}
.hexIn{
position: absolute;
width:96%;
padding-bottom: 110.851%; /* = width / sin(60) */
margin:0 2%;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
-ms-transform: rotate3d(0,0,1,-60deg) skewY(30deg);
transform: rotate3d(0,0,1,-60deg) skewY(30deg);
}
.hexIn * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexLink {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
-ms-transform: skewY(-30deg) rotate3d(0,0,1,60deg);
transform: skewY(-30deg) rotate3d(0,0,1,60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex img {
left: -100%;
right: -100%;
width: auto;
height: 100%;
-webkit-transform: rotate3d(0,0,0,0deg);
-ms-transform: rotate3d(0,0,0,0deg);
transform: rotate3d(0,0,0,0deg);
}
.hex p {
width: 100%;
padding: 2%;
box-sizing:border-box;
color: #fff;
background-color: #ff7f50;
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
opacity:0.8;
}
.hex p.cc {
width: 100%;
box-sizing:border-box;
color: #fff;
background-color: #54a29b;
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
width:100%;
bottom: 35%;
padding-top:50%;
font-size: 1.25em;
z-index: 1;
color:#000;
-webkit-transform:translate3d(0,-100%,0);
-ms-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0);
}
.hex p {
top: 58%;
padding-bottom:60%;
-webkit-transform:translate3d(0,100%,0);
-ms-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0);
}
/*** HOVER EFFECT **********************************************************************/
.hexLink h1,
.hexLink:hover p {
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
/*** HEXAGON SIZING AND EVEN ROW INDENTATION *****************************************************************/
@media (min-width:1201px) { /* <- 5-4 hexagons per row */
#hexGrid{
padding-bottom: 4.4%
}
.hex {
width:30%; /* = 100 / 3 */
}
.hex:nth-child(9n+4){ /* first hexagon of even rows */
margin-left: 15%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 1200px) and (min-width:901px) { /* <- 4-3 hexagons per row */
#hexGrid{
padding-bottom: 5.5%
}
.hex {
width: 25%; /* = 100 / 4 */
}
.hex:nth-child(7n+5){ /* first hexagon of even rows */
margin-left:12.5%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 900px) and (min-width:601px) { /* <- 3-2 hexagons per row */
#hexGrid{
padding-bottom: 7.4%
}
.hex {
width: 33.333%; /* = 100 / 3 */
}
.hex:nth-child(5n+4){ /* first hexagon of even rows */
margin-left:16.666%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 600px) { /* <- 2-1 hexagons per row */
#hexGrid{
padding-bottom: 11.2%
}
.hex {
width: 50%; /* = 100 / 3 */
}
.hex:nth-child(3n+3){ /* first hexagon of even rows */
margin-left:25%; /* = width of .hex / 2 to indent even rows */
}
}
@media (max-width: 400px) {
#hexGrid {
font-size: 13px;
}
}<div id="hexGrid">
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText1Content}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text1</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText2ontent}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text2</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayReportsContent}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text3</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText4Content}>
<img src="../../../../assets/images/hex-blue2.png" />
<h1>Text4</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText5Content}>
<img src="../../../../assets/images/hex-blue2.png" />
<h1>Text5</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText6Content}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text6</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText7Content}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text7</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
<li class="hex">
<div class="hexIn">
<a class="hexLink" onClick={displayText8Content}>
<img src="../../../../assets/images/hex-orange.png" />
<h1>Text8</h1>
<p>Click to learn more</p>
</a>
</div>
</li>
</div>
