Looking at the livelink and code provided below, I have successfully created a responsive grid layout. The last adjustment that needs to be made is to change some of the squares from square shape to rectangular.
The top two squares in the second column and the last two squares in the bottom row need to be transformed into rectangles. While I have managed to create a horizontal rectangle, I am struggling with maintaining the integrity of the row when adjusting the height of the squares vertically.
If anyone could guide me through a simple way to achieve this, I would greatly appreciate it as my previous attempts have not yielded the desired outcome.
Thank you
CSS
.trigger{
width:200px;
height:200px;
margin-right:15px;
margin-bottom:15px;
}
.hover-img,
.hover-img.hover_effect {
background-color:white;
position: relative;
width: 200px;
height: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-transform-style: preserve-3d;
text-align: center;
font-size: 0;
-webkit-user-select: none;
-webkit-touch-callout: none;
border-style: solid;
border-width: 1px;
border-color: #4595ff;
}
.trigger:hover > .hover-img {
-webkit-transform:rotateY(360deg);
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
transform:rotateY(360deg);
font-size:14px;
color:white;
}
.img1 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img1:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img2:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img3:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img4:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img5:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6 {
background-size: 100% 100%;
background-repeat: no-repeat;
}
.img6:hover{
background-size: 100% 100%;
background-repeat: no-repeat;
}
#container{
width:960px; margin: 0 auto;
}
.row{
display: flex;
}
HTML
<div id="container">
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img1"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img2"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img3"></div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img4"> </div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"> </div>
</div>
</div>
<div class="row">
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img5"> </div>
</div>
<div class="trigger">
<div tabindex="0" class="maincontent hover-img img6"> </div>
</div>
</div>
</div>