TIL(today I learned)

2020.10.21 #TIL

노랑세희 2020. 10. 22. 19:38

 오늘은 학원에서 블럭요소 hover시 이미지가 변경되는 방법 5가지를 배웠다. 이렇게 배운건 처음이라 새롭고 재밌었다

 

1. HTML에서 script 사용하기

HTML

        <div class="bigbox bigbox2 cf">

            <h2>예제2</h2>

            <div class="bbox bbox1">

                <img src="images/women1.jpg" 

                onmouseover="this.src='images/bw1.jpg'" 

                onmouseout="this.src='images/women1.jpg'" 

                alt="선글라스1">

            </div>

            <div class="bbox bbox2">

                <img src="images/women2.jpg" 

                onmouseover="this.src='images/bw2.jpg'" 

                onmouseout="this.src='images/women2.jpg'"

                alt="선글라스2">

            </div>

            <div class="bbox bbox3">

                <img src="images/women3.jpg" 

                onmouseover="this.src='images/bw3.jpg'" 

                onmouseout="this.src='images/women3.jpg'" 

                alt="선글라스3">

            </div>

            <div class="bbox bbox4">

                <img src="images/women4.jpg" 

                onmouseover="this.src='images/bw4.jpg'" 

                onmouseout="this.src='images/women4.jpg'" 

                alt="선글라스4">

            </div>

        </div>

   * onmouseover="this.src='images/bw1.jpg'" / onmouseout="this.src='images/woman1.jpg'" 

   * 자바스크립트 사용해서 바꿀 수 있음

 

2. margin과 overflow 활용

HTML

<div class="bigbox bigbox3 cf">

            <h2>예제3</h2>

            <div class="cbox cbox1">

                <img src="images/w1.jpg" alt="선글라스1">

            </div>

            <div class="cbox cbox2">

                <img src="images/w2.jpg" alt="선글라스2">

            </div>

            <div class="cbox cbox3">

                <img src="images/w3.jpg" alt="선글라스3">

            </div>

            <div class="cbox cbox4">

                <img src="images/w4.jpg" alt="선글라스4">

            </div>

        </div>

 

CSS
.bigbox > div{
margin: 20px 0 0 35px;
width: 200px;
height: 150px;
border: 1px solid #333;
float: left;
}



.bigbox .cbox{
overflow: hidden;
}
.bigbox .cbox img{
transition: all .3s;
}
.bigbox .cbox:hover img{
margin: -150px 0 0;
}

   * 부모 박스보다 이미지가 커서 overflow: hidden으로 가려주고 hover시 아래 이미지 크기만큼 margin: -값px을 줘서 이미지가 올라가게끔 할 수 있음

 

 

3. 블럭요소 background-position 사용

HTML

<div class="bigbox bigbox4 cf">

            <h2>예제4</h2>

            <div class="dbox dbox1">

            </div>

            <div class="dbox dbox2">

            </div>

            <div class="dbox dbox3">

            </div>

            <div class="dbox dbox4">

            </div>

        </div>

 

CSS

.bigbox .dbox{

    transition: all .3s;

}

.bigbox .dbox:hover{

    background-position: 0 -150px;

}

.bigbox .dbox1{

    background: url(../images/w1.jpg) no-repeat 0 0;

}

.bigbox .dbox2{

    background: url(../images/w2.jpg) no-repeat 0 0;

}

.bigbox .dbox3{

    background: url(../images/w3.jpg) no-repeat 0 0;

}

.bigbox .dbox4{

    background: url(../images/w4.jpg) no-repeat 0 0;

}


  *  block의 background로 이미지를 넣고 hover시 background-position 값을 변경해서 흑백 부분이 노출되도록 할 수 있음

 

 

 

4. 블럭요소에 border-radius가 적용되있는 경우

HTML

<div class="bigbox bigbox5 cf">

            <h2>예제5</h2>

            <div class="ebox ebox1">

            </div>

            <div class="ebox ebox2">

            </div>

            <div class="ebox ebox3">

            </div>

            <div class="ebox ebox4">

            </div>

        </div>

 

CSS

 

.bigbox5 > div{

    margin: 20px 0 0 70px;

    width: 150px;

    height: 150px;

    border: 1px solid #333;

    float: left;

    border-radius: 50%;

}

.bigbox5 .ebox1{

    background: url(../images/w1.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox1:hover{

    background: url(../images/bw1.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox2{

    background: url(../images/w2.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox2:hover{

    background: url(../images/bw2.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox3{

    background: url(../images/w3.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox3:hover{

    background: url(../images/bw3.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox4{

    background: url(../images/w4.jpg) no-repeat 50% 0;

}

.bigbox5 .ebox4:hover{

    background: url(../images/bw4.jpg) no-repeat 50% 0;

}

 


  *  background-position의 x축 값을 조정해서 이미지가 가운데에 노출되게 할 수 있음

 

 

 

 

5. display: none / block 사용

HTML

   <div class="bigbox bigbox6 cf">

            <h2>예제6</h2>

            <div class="fbox fbox1">

                <img src="images/women1.jpg" alt="선글라스1">

                <img src="images/bw1.jpg" alt="선글라스1-1">

            </div>

            <div class="fbox fbox2">

                <img src="images/women2.jpg" alt="선글라스2">

                <img src="images/bw2.jpg" alt="선글라스2-1">

            </div>

            <div class="fbox fbox3">

                <img src="images/women3.jpg" alt="선글라스3">

                <img src="images/bw3.jpg" alt="선글라스3-1">

            </div>

            <div class="fbox fbox4">

                <img src="images/women4.jpg" alt="선글라스4">

                <img src="images/bw4.jpg" alt="선글라스4-1">

            </div>

        </div>

 

CSS

 

.bigbox6 > div{

    margin: 20px 0 0 70px;

    width: 150px;

    height: 150px;

    border: 1px solid #333;

    float: left;

    border-radius: 50%;

    overflow: hidden;

}

.bigbox6 > div > img{

    margin: 0 0 0 -25px;

}

.bigbox6 > div > img:nth-child(1){

    display: block;

}

.bigbox6 > div:hover > img:nth-child(1){

    display: none;

}

.bigbox6 > div > img:nth-child(2){

    display: none;

}

.bigbox6 > div:hover > img:nth-child(2){

    display: block;

}

 


  *  hover시 display: block;되게 할 수 있음