더 나은 이미지 호버 효과를위한 10 개의 CSS 라이브러리

사용자에게 허용 웹 페이지의 어느 부분을 클릭 할 수 있는지 쉽고 명확하게 알 수 있습니다. UX 디자인의 중요한 부분입니다. 텍스트의 색을 바꾸고 밑줄을 긋는 것이 었습니다. 요즘에는 CSS를 사용하여 특히 이미지에 호버 효과를 전달할 수있는 다양한 방법이 있습니다..

개발자는 이제 할 수 있습니다. 마우스 오버 이벤트가 트리거 될 때 전환 효과 또는 애니메이션 추가. 우리는 방향성 슬라이드를보고, 다른 속도, 페이드 인 및 페이드 아웃, 힌지 효과, 스포트라이트 밝기, 워블, 바운스 등으로 확대 / 축소합니다..

이 편집에는 250 가지 이상의 마우스 오버 효과 당신에게 영감을주기 위해서. 소스에서 코드를 가져올 수도 있습니다..

이미지 호버 효과 (16 가지 효과)

이 페이지에는 캡션이있는 16 개의 마우스 오버 이미지 효과 모음이 있습니다. 이미지 위로 마우스를 가져 가면 각 효과에 대한 HTML 및 CSS 코드를 가져온 다음 코드 표시.

이미지 캡션 호버 애니메이션 (4 가지 효과)

다음은 이미지를 가리킬 때 실행되는 4 개의 캡션 애니메이션입니다. 이 효과는 순수한 CSS3 전환 및 변환으로 만들어지며 JavaScript가 없기 때문에 브라우저에서의 호환성을 높일 수 있습니다..

아이 호버 (35 가지 효과)

iHover는 CSS3에서 제공하는 호버 효과 모음입니다. 20 개의 원형 호버 효과와 15 개의 사각형 호버 효과가 있습니다. 효과를 사용하려면 HTML 마크 업을 작성하고 CSS 파일을 포함해야합니다..

이미지 호버 (44 가지 효과)

이 라이브러리에는 순수한 CSS로 만든 44 개의 효과가 포함되어 있습니다. 일부 효과에는 여러 방향으로 페이드, 푸시, 슬라이드, 경첩, 밝기, 확대 / 축소, 흐림, 뒤집기, 접기 및 셔터가 포함됩니다. € 14에 구입할 수있는 216 가지 효과의 확장 버전이 있습니다..

마우스 오버 효과 아이디어 (30 가지 효과)

Codrop에서 만든이 이미지 호버 데모는 이미지와 캡션 사이를 부드럽게 전환 할 때 영감을줍니다. 튜토리얼과 소스 코드로 두 세트에 총 30 가지 효과가 있습니다..

호버 CSS (108 가지 효과)

호버 CSS를 사용하면 단추, 링크 또는 이미지와 같은 요소에 호버 효과를 추가 할 수 있습니다. 이 효과에는 2D 전환, 배경 전환, 테두리, 그림자 및 글로우 전환 등이 포함됩니다. 라이브러리는 CSS, Sass 및 LESS에서 사용할 수 있습니다..

애니매티즘 (100+ 효과)

버튼, 오버레이, 세부 정보, 자막, 이미지 및 소셜 미디어 버튼에 100 개가 넘는 이미지 호버 애니메이션이 있습니다. 모든 효과는 CSS3에 의해 제공됩니다..

캡션 호버 효과 (7 가지 효과)

이 컬렉션에는 7 가지의 다양한 효과가 있습니다. 모든 장면 전환이 정말 멋지고 부드럽게 보입니다. 프로젝트에 이러한 효과를 적용하는 방법을 배우려면 튜토리얼 섹션으로 이동하십시오..

CSS 이미지 호버 효과 (15 가지 효과)

확대 / 축소, 슬라이드, 회전, 그레이 스케일, 흐림 효과, 불투명도 및 기타 기본 효과와 같은 간단한 호버 효과 모음입니다. CSS 클래스를 추가하기 전에 이러한 효과를 사용할 수 있습니다. 그림 꼬리표.

방향 인식 3D 호버 효과

이것은 당신의 마지막 마우스 움직임을 감지 할 수있는 매우 멋진 마우스 오버 효과입니다. 이미지 캡션은 마지막 커서 위치를 기준으로 네 방향 중 하나에서 열립니다..

마우스 오버 애니메이션

UNIQLO에서 영감을 얻은 경계 호버 애니메이션입니다. 마우스를 올리면 이미지 테두리가 움직입니다..

애니메이션 호버 어와 타일

하나는 타일 디자인을위한 것이고, 다른 하나는 느린 줌, 슬라이드, 팝업, 희미한 오버레이를 특징으로합니다..

SVG 클립 경로 호버 효과

SVG에 의해 구동되는 슈퍼 멋진 X 선 스포트라이트 이미지 호버 효과 클립 경로 및 CSS 전환. Chrome, Opera 및 Safari에서 올바르게 작동합니다..