CSS. 마우스 오버 효과 - 천천히 올라오게 하기

마우스를 올리면 자세히 보기 혹은 설명이 나오는 효과를 줄 것이다

 

 

예시

마우스 오버 전

마우스 오버 후

구성 살펴보기

우선 html부터 살펴보아서, 구성이 어떻게 되어있는지 보겠다

<div class="img-wrap">
    <div class="left">
        <div class="left-cont">
            <h4>플라멩고 혹은 홍학</h4>
            <p>목이 길고 주둥이는 중간쯤에서 급히 아래쪽으로 구부러졌고 발에 물갈퀴가 있다.</p>
            <a href="#">자세히 보기</a>
        </div>
    </div>
</div>

간단하게 왼쪽에 있는 사진을 가져왔다

 

img-wrap > left > left-cont > h4, p, '자세히 보기'

CSS 살펴보기

.img-wrap

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

이미지가 왼쪽, 오른쪽이 있으므로 display: flex를 주고,

그 사이의 간격을 적절히 주기 위하여 justify-content: space-between을 준다

 

.img-wrap .left

.img-wrap .left {
    width: 590px;
    height: 360px;
    background: url(../img/img_type01.jpg);
    position: relative;
    overflow: hidden;
}

자세히보기가 밑에서 올라오게 하기 위해서 (=position: absolute;)를 주기 위해서 

그것의 상위인 .left에 position: relative를 준다!

width / height  / background 설명 생략

 

.left-cont

.img-wrap .left-cont {
    position: absolute;
    left: 20px;
    bottom: 20px;
    bottom: -100px;
    transition: bottom 0.33s cubic-bezier(0.07, 0.71, 0.26, 0.99);
}

position을 absolute를 주어서 그림 밖으로 삐져나갈 수 있게 만든다

bottom -100px을 주어 제목만 보이게 만든다

transition으로 자연스럽게 올라오도록 한다

 

bottom: 20px; 

bottom: -100px; 이렇게 두 개를 주었는데,

우선순위가 더 높은 밑에 것이 적용된다

 

left:hover .left-cont

.img_type01 .img-wrap .left:hover .left-cont {
    bottom: 20px;
}

마우스를 오버하면 바텀을 20으로 올려준다