Search code examples
htmlcsscss-grid

How do I restrict images to container after scaling them?

I have created a grid with 4 columns 2 rows. The grid has a width of the whole page and each section is split evenly. I want to have an image in each one scaled at 1.1 and when the user hovers over the image, the scale reverts back to 1. The problem I'm running into right now is that when I scale it at 1.1, the images seem to overlap each other and they're no longer contained to their section of the grid (see image below where I have hovered over the 2nd page 2.jpg).

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <img id="pic1" src="1.jpg">
            <img id="pic2" src="2.jpg">
            <img id="pic3" src="3.jpg">
            <img id="pic4" src="4.jpg">
            <img id="pic5" src="5.jpg">
            <img id="pic6" src="6.jpg">
            <img id="pic7" src="7.jpg">
            <img id="pic8" src="8.jpg">
        </div>
    </body>
</html>

CSS:

* {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}

Screenshot:

Screenshot

Screenshot shows what happens when I hover over 2nd picture 2.jpg. The problem is that right now with the scale applied, images 1,2,5,6 are all overlapping in their corners. They are not restricted to the size of the original grid created by the container.

Solution

  • You can fix this by wrapping your images in containers and setting the overflow property of those containers to hidden (and the width to 100%).

    Like so:

    <!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="container">
            <div class="image-container">
                <img id="pic1" src="1.jpg">
            </div>
            <div class="image-container">
                <img id="pic2" src="2.jpg">
            </div>
            <div class="image-container">
                <img id="pic3" src="3.jpg">
            </div>
            <div class="image-container">
                <img id="pic4" src="4.jpg">
            </div>
            <div class="image-container">
                <img id="pic5" src="5.jpg">
            </div>
            <div class="image-container">
                <img id="pic6" src="6.jpg">
            </div>
            <div class="image-container">
                <img id="pic7" src="7.jpg">
            </div>
            <div class="image-container">
                <img id="pic8" src="8.jpg">
            </div>
        </div>
    </body>
</html>

    * {
    padding: 0;
    margin: 0;
}

.container {
    display: grid;
    grid-template-columns: repeat(4, 25%);
    background-color: #000;
    overflow: hidden;
    object-fit: cover;
}

.container .image-container {
    width: 100%;
    overflow: hidden;
}

.container .image-container img {
    width: 100%;
    height: auto;
    transform: scale(1.1);
}

.container .image-container img:hover {
    width: 100%;
    opacity: 1;
    transform: scale(1);
}