비주얼 스튜디오 코드 17_ 마우스 오버 효과

728x90

html 생성

linear-gradient(각도, 색상코드) - 직선 그라디언트

색상 코드 두가지로 사용하면 한 가지 명령어가 안 먹을 시에 둘 중 하나가 들어올 수 있도록 한다.

전에는 브라우저마다 속성이 다르기 때문에 배경색과 그라디언트색상을 두가지 사용했지만 지금은 거의 브라우저가 통일된상태이다.

_가운데 정렬 3총사

flex: 자식들을 옆으로 보내주는 것이 특징

alian-items: center; - 세로 가운데 정렬, 높이값이 있어야 적용이 됨

justfy-content: center; - 가로 가운데 정렬

border-radius: __px 는 이미지위에 피규어가 있기 때문에 이미지에 명령을 줘야함

figcaption이 움직이려면 부모(figure)가 기준점(relative)이 되어야함

figure영역에 overflow: hidden; 을 줘야 figcaption을 숨겨줄 수 있다.

마우스오버시 figcaption이 올라오게 하려면 figure에 :hover 명령어를 넣어주고

속도를 주어 스르르 올라오게 하기 위해 figcaption에 transition: all 00s 초를 넣어주면 된다.

html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <figure class="ho1">
            <img src="./img01.png" alt="거북이이미지">
            <figcaption>
                <h3>MOUSE HOVER</h3>
                <p>마우스오버 효과입니다.(왼쪽)</p>
            </figcaption>
        </figure>


        <figure class="ho2">
            <img src="./img02.png" alt="사슴이미지">
            <figcaption>
                <h3>MOUSE HOVER</h3>
                <p>마우스오버 효과입니다.(오른쪽)</p>
            </figcaption>
        </figure>
    </div>
</body>
</html>

css

@charset "utf-8";

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

body{
    height: 100vh;
    background-color: #0f2027;
    background-color: linear-gradient(120deg, #2c5364, #203a43, #0f2027);
    /*linear-gradient(각도,색상코드)- 직선그라디언트*/
}

#wrap{
    display: flex;
    align-items: center;
    /*높이값이 있어야지 적용이 됨*/ /*세로가운데 정렬*/
    height: 100vh;
    justify-content: center; /*가로 가운데 정렬*/
}

#wrap figure{
    margin: 20px;
    width: 400px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

#wrap figure img{
    width: 100%;
    display: block;
    border-radius: 5px;
    /*figure위에 이미지에 radius를 줘야 적용이 됨*/
}

#wrap figure figcaption{
    background-color: white;
    opacity: 0;
    padding: 15px;
    position: absolute;
    left: 0;
    bottom: -150px;
    width: 100%;
    font-weight: bold;
    transition: all 0.5s;
}

#wrap figure:hover figcaption{
    bottom: 0;
    /*figure에 마우스를 올려놨을 때 figcaption이 움직인다.*/
    opacity: 0.3;
}

#wrap figure figcaption h3{}
#wrap figure figcaption p{}

728x90

저작자표시 비영리 변경금지

'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글

비주얼 스튜디오 코드 19_ 연꽃축제 예제_banner, contents 넣기 (0)	2023.06.08
비주얼 스튜디오 코드18_ 연꽃축제 예제_header 사이드 (0)	2023.06.08
비주얼 스튜디오 코드 16_ header 사이드에 넣기 (0)	2023.06.07
비주얼 스튜디오 코드⑮ 트렌스폼을 이용해서 효과주기_2 (0)	2023.06.07
비주얼 스튜디오 코드⑭ 피그마이용해서 이미지크기 조절 ㅣ 콘텐츠 모양을 자유롭게 변형하기_2 (0)	2023.06.05