다음은 게스트 게시물에 의해 Dylan Winn-브라운,보여줍니다 우리 성능 기준에 맞는 방식으로 이러한 작업을 수행하는 디자인에 효과가 있다.

최근에 클라이언트의 웹 사이트에서 작업하는 동안 이와 같은 효과를 복제하도록 요청 받았습니다.

이 유형의 효과는 특히 사용되는 포트폴리오에서 형 상황을 디자인 할 예정이 모두 시각과 정보세요.

는 많은 다른 사용 가능한 방법으로는

로 만들어지지 않는 효과를 이용하기 시작했 살펴보는 다른 방법이며 이를 통해 온 다른 방법이 있습니다.

하나의 옵션은 jQuery 플러그인을 사용하는 것이 었습니다. 이 사람은 내가 후 꽤 효과가 아니었다,확실히 매우 가벼운 아니었다.

또 다른 옵션은 컨테이너 내에<img>를 배치하고 CSS 로 조작하는 것이 었습니다. 이 있을 수도 있습 잠재적인 이득처럼,여기에도를 설정할 수 있다는 것은 원본과 함께srcset도록 이미지가 사용되는 성능 및 장치-적합합니다.

내 상황에서는 css 에서 효과를 전적으로 관리하고 싶었 기 때문에 그 일을 위해갔습니다.

기본 기능

를 달성하기 위해서 최적의 성능을,나를 사용하기로 결정했 CSStransform속성을 손잡이의 확대 이미지입니다. (Css 애니메이션은 하드웨어 가속의 이점을 얻으며 결과적으로 다른 애니메이션 방법보다 부드럽게 나타납니다.)

아닌<img><div>부모 안에 행동으로 이미지입니다. 구조:

<div class="parent"> <div class="child"></div></div>

먼저 부모 요소의 치수를 지정합니다. 그 아이를 채울 수 있는 부모를 사용하는width: 100%height: 100%;뿐만 아니라 배경 이미지를 설정을 보장,그것은 지역을 커버한다.

.parent { width: 400px; height: 300px;}.child { width: 100%; height: 100%; background-color: black; /* fallback color */ background-image: url("images/city.jpg"); background-position: center; background-size: cover;}

그런 다음 자식 요소에 영향을 미치는 상위 요소에 호버 효과를 추가합니다. 초점식을 위해 좋은 접근성 뿐만 아니라.

.parent:hover .child,.parent:focus .child { transform: scale(1.2);}

사용할 수 있는 도구를 추가하는 접두사를 위한 최상의 브라우저 지원합니다.

을 끝까지 기본적인 효과를 추가할 수 있습니다 일부 전환 우리 아이의 요소의 정상적인 상태:

transition: all .5s;

경우에 당신이 원하는 색상을 추가하려면 오버레이를 사용할 수 있습의 의사와 같은 요소::before:

.child::before { content: ""; display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; background-color: rgba(52, 73, 94, 0.75);}.parent:hover .child:before,.parent:focus .child:before { display: block;}

때 지금 우리가 가리키기에 부모 요소로,아이는 요소를 표시해야 색상 중첩!

마지막으로 오버레이에 표시 할 텍스트를 추가하는 방법을 다룰 것입니다. 우리가 요소를 추가할 수 있습을 우리의 현재 자녀가 요소는 다음과 같이

<div class="parent"> <div class="child"> <span>Hello</span> </div></div>

을 제공할 수 있습<span>어떤 스타일:

span { color: white; /* Good thing we set a fallback color! */ font-family: sans-serif; padding: 25%; position: absolute;}

그리고 우리는 그것을 만들 수 있습니다 볼 수 있을 때에만 우리는 하버에는.parent:

.parent:hover span,.parent:focus span { display: block;}

라이브 데모

볼 펜 이미지에서 확대/축소버–포트폴리오 웹사이트는 딜런이(@dwinnbrown)에 CodePen.

모바일 지원

컨테이너가 링크이고 호버 상태가 필수 정보를 공개하지 않으면 그냥 내버려 둘 수 있습니다.