CSS만 있는 사진 포트폴리오

HTML과 CSS만으로 아름다운 사진 포트폴리오 웹사이트를 만들 수 있습니다. 그리고 네, 자바스크립트 없이 줌 사진 효과를 얻을 수 있습니다.



적용할 중요한 CSS

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

transition 속성은 확대/축소가 적용될 때 원활하게 적용되도록 합니다.

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);
}

이제 transform 속성을 사용하여 scale() 방법을 정의합니다. 여기서 이미지 너비는 호버링 시 1.5씩 증가하지만 물론 그보다 더 커질 수도 있습니다. 취향에 따라 다릅니다. z-index는 확대할 때 항상 다른 모든 항목 위에 쌓이도록 하기 위해 있습니다.

마지막으로 여기에서 흥미로운 부분이 있습니다. 화면의 가장 왼쪽과 오른쪽에 있는 모든 이미지가 확대되었을 때 넘치지 않도록 하고 싶습니다. 이렇게 하려면 가장 왼쪽과 오른쪽에 있는 이미지가 화면 중앙으로 약간 이동하도록 해야 합니다. 마우스를 올렸을 때의 화면. 따라서 해결해야 할 두 가지 문제가 있습니다.

가장 오른쪽에 있는 이미지를 왼쪽으로, 가장 왼쪽에 있는 이미지를 오른쪽으로 어떻게 이동합니까?

CSS가 화면의 가장 왼쪽과 오른쪽에 있는 이미지만 선택하게 하려면 어떻게 해야 합니까?

transform: translateX();에 적용된 img:hover 방법을 사용하여 첫 번째 목표를 달성했습니다. 따라서 이미지는 X축을 따라 수평으로 이동합니다.

/* 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%);

이제 nth:child() 속성을 사용하여 두 번째 질문에 답할 수 있습니다. 기본적으로 화면 맨 왼쪽에 있는 모든 사진을 선택하려면 1, 4, 7번째 자식을 선택해야 합니다. 즉, 숫자를 3만큼 늘립니다.

이를 달성하기 위해 img:nth-child(3n+1):hover를 사용합니다. 이렇게 하면 형제의 첫 번째 자식과 모든 후속 세 번째 자식에만 스타일이 적용됩니다. 한편 화면 맨 오른쪽에 있는 모든 사진을 선택하려면 다음 공식을 사용합니다. img:nth-child(3n+3):hover . 3번째 자식부터 시작하고 이후의 모든 3번째 자식을 선택하기 때문입니다.

/* 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);
}