60 lines
1009 B
CSS
60 lines
1009 B
CSS
.container {
|
|
max-width: 75%;
|
|
margin: 1em auto;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: 98vh;
|
|
grid-gap: 1vw;
|
|
margin: 0 auto;
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.column {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 4vw);
|
|
grid-template-rows: repeat(10, 8vh);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.column:hover {
|
|
padding-right: 15vw;
|
|
}
|
|
|
|
.column1 {
|
|
background-color: #ccf0e8;
|
|
opacity: 1;
|
|
}
|
|
.column1:hover {
|
|
opacity: 1;
|
|
background-image: url(1jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.column2 {
|
|
background-color: #ffbdbd;
|
|
}
|
|
.column2:hover {
|
|
background-image: url(2jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.column3 {
|
|
background-color: #a1cde4;
|
|
}
|
|
.column3:hover {
|
|
background-image: url(3jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
.column4 {
|
|
background-color: #f1cbff;
|
|
}
|
|
.column4:hover {
|
|
background-image: url(4jpg);
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|