CSS. 마우스 오버 효과 - 입체 효과 내기

네모가 돌아서 자세히보기를 클릭할 수 있게 유도해준다

예시

마우스 오버 전

마우스 오버 후

구성 살펴보기

<div class="img-wrap">
    <ul>
        <li>
            <span>
                <em>크라운 피쉬</em>
                <a href="#">자세히 보기</a>
            </span>
        </li>

img-wrap > ul > li > span > em, a

 

이번에는 조금 독특하게 ul과 li로 구성해보았다

CSS 살펴보기

.img-wrap ul

.img-wrap ul {
    display: flex;
    justify-content: space-between;
}

이미지를 3개를 넣어야 하니 

이젠 눈 감고도 display: flex, justify-content: space-between

 

.img-wrap li

.img-wrap li {
    width: 387px;
    height: 387px;
    background-size: 100%;
    position: relative;
    perspective: 800px;
}

background-size: 100% -> 혹시라도 바둑판처럼 그림이 나열될까봐...!

밑에 또 글씨를 내맴대로 움직일거니까 상위 요소인 li에 position: relative를 주고

perspective: 800px을 준다

 

perspective는 새로나온 개념으로(내기준), 얼마나 먼지, 가까운지 원근 거리를 조절한다고 한다
값이 크면 원근감이 커지고 낮으면 가깝게 느껴진다

 

.img-wrap li::after

.img_type02 .img-wrap li::after {
    content: '';
    display: block;
    background: #fff;
    position: absolute;
    left: 30px;
    right: 30px;
    top: 30px;
    bottom: 30px;
    opacity: 0;
    transition: all 0.4s ease-in-out;
    transform: rotateX(-90deg);
}

li에 가상요소를 준다 (두근두근... 아직 익숙하지 않아서 중간에 코드 꼬일까봐 두근두근...)

왜 가상요소를 주냐면 마우스 오버를 했을 때 생길 네모를 만들기 위해서다

옛날같으면 네모를 위한 div를 하나 줬겠지만

이젠 가상요소로 만들 수 있다! ^^

 

.img-wrap li:hover::after

.img_type02 .img-wrap li:hover::after {
    opacity: 0.8;
    transform: rotateX(0deg);
}

자... 가상 클래스와 가상 요소가 같이 있다고 해서 당황하면 안된다

 

위의 transfrom과 연관되는데, 

x축으로 회전하듯이 보여준다 대신, opacity(투명도)를 주어서 더 자연스럽게 만들 수 있다

 

.img-wrap li span

.img-wrap li span {
    position: absolute;
    left: 50%;
    top: calc(50% + 36px);
    color: #000;
    z-index: 100;
    transform: translate(-50%, -50%);
    text-align: center;
    transition: all 0.3s ease-in-out;
}

.img_type02 .img-wrap li:hover span {
    top: 50%;
}

li에 position relative를 준 걸 이제야 포지션 앱솔루트 준다

가상요소때문에 기억도 안난다 이제

 

여튼 여기서 봐야할 것은 top: calc(50% + 36px) 이다

알아서 계산해주는건데, 50%보다 한 36px정도? 밑에 있으면 좋겠다라고 개떡같이 말하면 컴퓨터가 찰떡같이 알아듣는다고 한다

 

이게 다 '자세히보기'를 안보여줬다가 마우스오버하면 보여주려고 하는 일이다

 

.img-wrap li:nth-child(N)

 

.img-wrap li:nth-child(1) {
    background-image: url(../img/img_type_2-1.jpg);
}

목록 별로 백그라운드 이미지를 순서를 통해 넣어줄 수 있다

 

총평

너무 길어져서 생략한 것도 꽤 되지만, 이정도면 핵심만 골랐다고 할 수 있다