category:
Technology
Back to Blog Index
4グリッドで画像を並べてhoverでscaleさせるレスポンシブコード
4グリッドで画像を並べてhoverでscaleさせるレスポンシブコードは以下になります。
vertical-align: top; がないと、hover時に縦に伸びてしまう（高さが変わってしまう）ので注意。
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5%2%;
li {
a {
display: table-cell;
overflow: hidden;
img {
width: 100%;
aspect-ratio: 268 / 375;
object-fit: cover;
transition: transform 1s;
vertical-align: top;
}
&:hover {
img {
transform: scale(1.1);
}
}
}
}
}