Photography Portfolio with CSS Only

You can create a beautiful photography portfolio website with just a HTML and CSS. And yes, you can achieve that zoom photos effect without javascript.

Important CSS to apply

img {
width: 30%;
border-radius: 10px;
margin: calc(10%/6);
transition: all 0.5s ease;
}

The transition property makes sure when the zoom takes effect, it'll happen smoothly.

img:hover {
box-shadow: #f9fbe7 0px 13px 27px -5px, #fff59d 0px 8px 16px -8px;
margin: calc(10%/6);
cursor: pointer;
z-index: 9999;
transform: scale(1.5);
}

Now, Using the transform property, I define the scale() method, where the image width will increase on hover by 1.5 but of course it can be bigger than that, depends on your liking. The z-index is there so as to ensure when zoomed in, it will always be stacked on top of everything else.

Lastly, here's where it gets interesting. I want to make sure all images on the most left and right side of the screen to NOT overflow when they are zoomed in. To do this, I need to make sure the images on the most left and right move slightly to the center of the screen when on hover. So, there are two problems I need to solve:

1. How to move the images on the most right side to the left and images on the most left to the right?
2. How do I make CSS choose only those images positioned on the most left and right side of the screen?

I achieve the first objective by using the transform: translateX(); method applied on the img:hover. So images will move horizontally along the X axis.

/* for images on the most left, use a positive value */
transform: translateX(40%);

/* for images on the most right, use a negative value as it moves to the opposite direction */
transform: translateX(-40%);

Now, the second question can be answered using the nth:child() property. Basically, to select every pic on the most left of the screen, I need to select the 1st, 4th, and 7th children. In other words, increase the number by 3.

To achieve that, I use img:nth-child(3n+1):hover as this ensures the style will ONLY be applied to the first child and every subsequent 3rd child of the siblings. Meanwhile, to select every pic on the most right of the screen, I use the following formula: img:nth-child(3n+3):hover. Because it starts from the 3rd child and also selects every subsequent 3rd child after it.

/* ensures all images on the most left moves slightly to the right so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+1):hover {
  transform: translateX(40%) scale(1.5);
}

/* ensures all images on the most right moves slightly to the left so the pictures won't overflowed when zoomed in*/
img:nth-child(3n+3):hover {
  transform: translateX(-40%) scale(1.5);
}