전에 볼 수 없었던 멋진 카드 호버 효과.

15596 단어 uiweeklyuxcsswebdev

데모





I suggest you to see the result in new full view window. click on the top right most button for new window view. Yeah its not responsive but you can make it :)



비디오 튜토리얼 -





코딩하자 -



이제 코딩을 시작해 보겠습니다. css만으로 만들 것이므로 index.html과 style.css 파일을 2개 만들고 기본 html 구조 코드를 index.html에 작성하고 css 파일도 링크합니다.

이 <body> 내부의 배경은 <div>을 만들고 클래스 이름은 .card이고 그 내부는 <img />을 만들고 클래스 .card-img을 만든 다음 14는 클래스 10이 있는 또 다른 <div>을 만듭니다. 이제 마지막으로 .content을 만들고 클래스 <span>을 지정하고 h1 안에 원하는 것을 입력하고 클래스 .title으로 h1을 만들고 콘텐츠를 입력합니다.

이와 같이 -

<div class="card">
    <img src="img1.jpg" class="card-img" alt="">
    <div class="content">
         <span></span>
         <span></span>
         <span></span>
         <span></span>
         <h1 class="title">card 1</h1>
         <p class="info">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut quaerat similique, cupiditate ex placeat error ducimus fugiat. Quam, explicabo asperiores!</p>
    </div>
</div>


이제 이 요소를 세 번 복사하여 세 개의 카드를 만들고 각 이미지를 변경해야 합니다 p .

이제 CSS를 작성해 보겠습니다. .info 파일을 열고 이러한 스타일을 입력하십시오.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #ff5a5a;
}

.card{
    width: 300px;
    height: 450px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    transition: 1s;
}

.card-img{
    position: absolute;
    height: 100%;
    min-width: 100%;
    top: 50%;
    left: 50%;
    transition: 1s;
    transform: translate(-50%, -50%);
}

.card:hover{
    transform: translateY(-20px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

.card:hover .card-img{
    height: 110%;
}


지금까지 우리는 카드의 스타일을 지정하고 이미지를 중앙에 설정하고 카드를 호버링하고 상자 그림자로 카드를 들어올릴 때 이미지를 확대/축소하는 것과 같은 약간의 호버 효과를 설정했습니다. CSS를 이해하는 것은 쉽습니다.

이제 이것을 입력하십시오

.content{
    width: 92%;
    height: 95%;
    overflow: hidden;
    border-radius: 20px;
    border: 3px solid #fff;
    font-family: roboto, sans-serif;
    text-align: center;
    padding: 40px 20px;
    position: relative;
    transition: .5s;
    opacity: 0;
}

.card:hover .content{
    opacity: 1;
}

.title{
    position: relative;
    text-transform: capitalize;
    font-size: 50px;
    margin-bottom: 30px;
    z-index: 2;
    opacity: 0;
    transition: .5s;

}

.info{
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: .5s;
}


그리고 이 코드를 작성한 후 src 요소의 style.css에도 스타일을 지정했습니다. 지금까지 .content 및 .card의 스타일을 모두 지정했습니다.
이제 이 전체 효과를 완료해 보겠습니다.

이것을 코딩

.content span{
    position: absolute;
    width: 25%;
    height: 0;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    background: #fff;
    top: 0;
    left: 0;
    z-index: 1;
    transition: 1s;
}

.content span:nth-child(2){
    left: 25%;
}

.content span:nth-child(3){
    left: 50%;
}

.content span:nth-child(4){
    left: 75%;
}

.card:hover .content span:nth-child(1){
    height: 85%;
    transition-delay: .5s;
}

.card:hover .content span:nth-child(2){
    height: 75%;
    transition-delay: 1s;
}

.card:hover .content span:nth-child(3){
    height: 79%;
    transition-delay: 1.5s;
}

.card:hover .content span:nth-child(4){
    height: 90%;
    transition-delay: 2s;
}


여기에서 .title의 각 p 요소를 선택하고 너비 <span>으로 스타일을 지정하고(4개의 스팬이 있으므로 4/100% = 25%) 높이를 .content과 동일하게 설정한 다음 각각에 호버링 효과를 추가합니다. span 과 높이를 다르게 하고 25% 을 더합니다.

이것으로 우리의 효과는 이 마지막 터치로 완료됩니다.
이것도 추가

.card:hover .title,
.card:hover .info{
    opacity: 1;
    transition-delay: 3s;
}


이제 이 줄은 0 및 transition-delay 요소 h1 을 설정하고 일부는 p 으로 설정합니다.

그러니 이 효과가 마음에 드시고 하나하나 이해하셨으면 좋겠습니다. 이 부분에서 제가 실수한 부분이 있으면 댓글로 알려주세요.
스타일을 Python 콘솔로
내 VS 코드 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage