CSS Hover 애니메이션 - 1

CSS Hover 애니메이션 - 1

css 호버효과, 가상요소 ::before, ::after를 활용하여
아래와 같은 호버효과를 css로 만들어 보았다.

만들어보자

이제 직접 만들어 보자 엄청 간단하다.

먼저 호버할 상자를 아래와 같이 만들어주자

<div class="image-box">
    <div class="content"></div>
</div>

그리고 상자에 원하는 css를 적용시켜 보자
자식 요소인 검정색 커버 위치조정을 absolute로 해야하기 때문에
position: relative를 써주자

.image-box {
    width: 200px;
    height: 200px;
    padding: 20px;
    background: skyblue;
    box-sizing: border-box;
    position: relative;
}

image-box에 ::after를 이용하여 검정색 커버를 씌워고
absolute를 사용하여 위치를 맞춘다.
이때 나중에 추가할 애니메이션을 위해
opacity를 설정해주고, 진행시간을 transition: 0.5s(초) 지정해준다.

.image-box::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4);
    left: 0;
    top: 0;
    opacity: 0;
    transition: .5s;
}

이제 image-box호버시 커버가 나오게 css를 지정 해보자

.image-box:hover::after {
    opacity: 1;
}

여기까지 하면 아래와 같이 호버시 효과가 나타난다.

이제 .content에 css를 지정해주자.
자식 요소 absolute 사용을 위해 relative적용
그리고 앞서 만든 커버에 가려지지 않도록
z-index를 사용해 위로 올려준다.

.content {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}

이제 안에 들어갈 흰선(?)을 만들어주자
흰선은 역시 ::before, ::after를 사용한다.

가로 세로를 0%로 지정후
.content안에 정가운데로 위치를 옮겨줘야한다.

.content::after,
.content::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 0%;
    height: 0%;
    border-color: white;
    border-width: 1px;
    transition: .5s;
}

이제 before, after에 border-style과
가로 세로 사이즈를 지정해준다.
after에는 상하선만 그려주고
before는 좌우선을 그려준다
(after의경우 가로로 커지고 before경우 세로로 커지기때문)

.content::after {
    height: 100%;
    border-style: solid none;
}

.content::before {
    width: 100%;
    border-style: none solid;
}

이제 호버시 이펙트가 나타나게 css를 적어보자

.image-box:hover .content::after,
.image-box:hover .content::before {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

결과물

- 끝 -