-
2020.10.21 #TILTIL(today I learned) 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;되게 할 수 있음'TIL(today I learned)' 카테고리의 다른 글
2020.10.26 #TIL (0) 2020.10.27 2020.10.22 #TIL (0) 2020.10.22 2020.10.19 #TIL (0) 2020.10.20 2020.10.16 #TIL (0) 2020.10.16 2020.10.15 #TIL (0) 2020.10.16