Normally, when content or an image overflows outside a div, the overflowing content is shown on the right outside the “box”. If you want to position the content to the center, so that overflow is on both sides, you can use this class. This is useful to position an image such that the centre of the image is in focus when it overflows.

1
2
3
4
5
6
7
/* Class to be added to the content or image inside the container-div */
.overflow-center {
    position: relative;
    left: 50%; /* move the image to right by 50% of container size */
    transform: translateX(-50%); /* pull back by 50% of the image or content size */
    width: auto;
}

In the images below, the red lines mark the boundaries of the container div.

Image without ‘overflow-center’ class. The image overflows only to the right of its container.

Image without ‘overflow-center’ class. The image overflows only to the right of its container.

Image with ‘overflow-center’ class. The image overflows to both sides of its container.

Image with ‘overflow-center’ class. The image overflows to both sides of its container.


Related Posts: