How to Create Bootstrap Card Hover Effect ( jQuery )

안녕하세요 모두, 그 akshay 및 일일 수업료 YouTube 채널에 오신 것을 환영합니다 이 튜토리얼에서는 호버 효과가 적용된 간단한 부트 스트랩 카드를 만듭니다

먼저 부트 스트랩 카드를 만듭니다 그런 다음 그림자를 추가하고 jover를 사용하여 호버 아웃 효과로 호버를 만듭니다 자습서를 시작하기 전에 이 채널에서 더 새로운 사용자라면 구독 버튼을 클릭하고 종소리 아이콘 또한 자습서에서 Let�s 버튼을 누르는 것을 잊지 마십시오 그래서 let 's가 시작되도록하기 전에

비주얼 코드 편집기에서 프로젝트 파일을 만들고 스톡 폴더에 몇 가지 이미지를 추가하십시오 이 자습서에서는 세 가지 이미지를 사용하고 있습니다 이제 html 파일 호출 인 indexhtml을 작성하십시오 그리고 그 직후에 style

css 파일을 만들 것입니다 이 파일에서 html 발췌 문장을 추가하고 페이지 제목을 변경합니다 그런 다음 부트 스트랩 CSS 파일을 추가합니다 이 CDN을 복사하여 머리에 붙여 넣으십시오 그 후에도 style

css 파일을 링크 할 것입니다 그런 다음 스크립트 태그를 삽입하여 js 파일을 추가하십시오 부트 스트랩이 jquery 슬림 파일을 사용하고있는 것을 볼 수 있습니다 이 파일을 제거하고 jquery minjs 파일을 추가하려고합니다

슬림 파일에는 애니메이션 기능이 없으므로 호버를 만들고 호버 아웃 효과를 만들기 위해 우리는 애니메이션 기능을 사용하고 있습니다 따라서이 함수를 사용하기 위해이 파일을 제거하고 jqueryminjs 파일을 사용합니다 그냥 복사해서 여기에 붙여 넣으세요

이제 부트 스트랩 카드를 만듭니다 이것을 생성하기 위해서 div를 컨테이너 클래스로 추가 할 것입니다 그런 다음 행을 추가하고이 행에 세 개의 열을 만듭니다 이 세 개의 열은 모두 하나의 카드를 포함합니다 이제 부트 스트랩 카드를 만듭니다

부트 스트랩 웹 사이트에서이 부트 스트랩 카드 코드를 복사 할 수는 있지만 가장 좋은 방법은 이 코드를 수동으로 적어 두는 것입니다 그래서 우리는 카드 클래스로 div를 만들고 스타일 폭 18 rem을 추가합니다 이 카드에 이미지 태그를 추가하고 이미지 소스를 지정합니다 그런 다음 alt 텍스트를 지정하고 클래스 카드 img top을 추가하십시오 그런 다음 카드의 본문 부분을 만듭니다

div를 클래스 카드 본문에 추가합니다 본문에는 카드 제목 클래스가있는 h5 제목 레벨 태그를 삽입합니다 그런 다음 단락 태그를 추가하고 데모 텍스트를 삽입합니다 따라서이 웹 사이트에서이 데모 텍스트를 복사하여 단락에 붙여 넣습니다 그 후에 버튼 기본 클래스가있는 앵커 태그를 추가하여 기본 부트 스트랩을 만듭니다

단추 그리고이 버튼의 이름을 읽으십시오 이제 프로젝트를 실행하십시오 라이브 서버 확장을 설치 했으므로이 파일을 마우스 오른쪽 단추로 클릭하고 간 서버로 열어 이제 첫 번째 카드가 생성됩니다

이제 두 번째 열에 두 번째 카드를 만듭니다 두 번째 카드를 만들려면 카드 클래스로 div를 만들고 너비를 추가하십시오 그런 다음 img 태그를 만들고 이미지 원본, 대체 텍스트 및 클래스를 지정하십시오 그런 다음 카드의 본문 부분을 만듭니다 그래서 카드 바디 클래스로 div를 만들고 카드 제목 클래스로 제목 레벨 태그 인 h5를 추가하십시오

그리고 포트폴리오 텍스트를 추가하십시오 그런 다음 카드 텍스트 클래스로 단락을 만들고 데모 텍스트를 추가하십시오 그 후 카드 하단에 부트 스트랩 기본 버튼을 만듭니다 그거야 두 번째 카드가 만들어집니다

이제 우리는 세 번째 카드를 만들 것입니다 이것을 만들려면 두 번째 카드 코드를 복사하여 세 번째 카드를 만드는 데 사용하십시오 따라서 이것을 복사하여 세 번째 부트 스트랩 열에 붙여 넣으십시오 원본 이미지와 카드 제목 텍스트 만 변경하십시오 이제 세 장의 카드가 모두 만들어졌습니다

나는이 카드들에 여백을 더하고 싶었다 따라서 두 번째 카드에 남은 여백을 추가하고 세 번째 카드에 남은 여백을 추가합니다 그리고 나는이 카드들을 중심에두기 위해 stylecss 파일에 코드를 몇 개 쓸 것입니다 style

css 파일에서 컨테이너 클래스를 만듭니다 여백 상위 8 %와 여백 8 %를 추가하십시오 그래서 우리는이 카드들을 중심에 두었습니다 그 다음, 우리는이 카드에 사용자가 마우스를 가져갈 때 섀도우 호버 효과를 생성 할 것입니다 그래서 style

css에서 콜론 호버 카드를 추가 할 것입니다 Webkit box shadow를 추가하고 rgb alpha color로 그림자 값을 지정하십시오 먼저 firefox와 chrome에이 속성을 추가합니다 그런 다음 일반 CSS 속성을 지정하십시오 이제 호버 쉐도우 효과가 제대로 작동합니다

하지만이 카드에 더 많은 효과를 추가하고 싶었습니다 그래서 우리는 script 태그를 생성하고 hover를 수행하는 jquery 함수를 생성 할 것입니다 호버 아웃 효과 먼저 문서 준비 기능을 추가합니다 이 함수는 페이지 DOM이 자바 스크립트 코드를 실행할 준비가되면 실행됩니다

그런 다음 jquery selector를 추가하고 4 열을 지정합니다 그리고 호버 기능을 만듭니다 따라서 호버 기능의 첫 번째 매개 변수에 함수를 추가합니다 이 함수는 html 요소 위에 마우스를 올리면 실행됩니다 이 함수에서이 점 애니메이션 함수를 호출합니다

그리고 CSS margin top-1 %를 지정하십시오 따라서이 속성은 요소 위로 마우스를 이동하면 위쪽에서 여백 1 % 여백을 제거합니다 둘 이상의 CSS 속성을 지정할 수 있습니다 그리고 duration을 지정하여 애니메이션이 실행되는 시간을 결정하십시오 그 후 우리는 호버 기능에 대한 두 번째 매개 변수를 만듭니다

여기서는 쉼표를 추가하고 기능을 만듭니다 이 기능은 호버 아웃 효과를 만듭니다 따라서 요소에서 마우스 커서를 움직이면이 함수가 실행됩니다 그래서 우리가 이전에 만든 함수는 동일하지만 마진 상위 0 %를 지정합니다 이 함수는 요소 위로 마우스를 가져갈 때 시작됩니다

따라서이 함수는 요소에서 마진 상위 1 %를 제거하고 기본값으로 돌아갑니다 여백 8 %를 Stylecss 파일에서 정의합니다 그리고 기간을 지정하십시오 세미 콜론으로 문을 닫습니다

그리고 프로젝트를 실행하십시오 jqueryminjs 파일을 지정하기 때문에이 함수가 작동하지 않는 것을 볼 수 있습니다 이 함수

그래서 페이지로드 스크립트 함수가 먼저 실행되고 jquery 파일이 포함됩니다 그래서이 문제를 해결하기 위해 jquery 파일을 아래에서 제거하고 머리 그래서 문서가로드 될 때 jquery 파일에는 먼저 스크립트 함수가 포함됩니다 실행 따라서 프로젝트를 실행하면이 멋진 효과를 볼 수 있습니다

이 효과를 html 요소에 추가 할 수 있습니다 그래서 그거야 우리는이 멋진 호버 효과를 카드에 만들었습니다 이 효과는 웹 사이트 또는 블로그에서 사용할 수 있습니다 마음에 의문 사항이 있으면 비디오 댓글 섹션에서 저에게 의견을 말하십시오

그리고 당신이 도움이되고 구독을 누르면이 비디오가 마음에 드는 것을 잊지 마십시오 벨 아이콘 단추입니다 우리는 다음 비디오에서 당신을 볼 것입니다 그때까지 행복하게 지켜봐 주셔서 감사합니다