1. 이미지를 삽입할 img 태그 두 개를 넣고 div로 감싼다. (div > img1, img2)
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<h1>Hover Effect</h1>
<div class="jb-a">
<img src="images/image-01.jpg" alt="" class="jb-b">
<img src="images/image-02.jpg" alt="" class="jb-c">
</div>
</body>
</html>
2. position 속성으로 두 개의 이미지를 겹친다.
.jb-a {
width: 400px;
margin: 0px auto;
position: relative
}
.jb-c {
position: absolute;
top: 0px;
left: 0px;
}
3. 두 번째 이미지를 display: none을 사용하여 보이지 않게 한 후,
:hover 시 display: block 속성을 사용하여 보이게 한다.
.jb-c {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.jb-a:hover .jb-c {
display: block;
}
전체 코드
더보기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
body {
box-sizing: border-box;
font-family: Consolas, monospace;
}
h1 {
text-align: center;
}
img {
max-width: 100%;
}
.jb-a {
width: 400px;
margin: 0px auto;
position: relative
}
.jb-c {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.jb-a:hover .jb-c {
display: block;
}
</style>
</head>
<body>
<h1>Hover Effect</h1>
<div class="jb-a">
<img src="images/image-01.jpg" alt="" class="jb-b">
<img src="images/image-02.jpg" alt="" class="jb-c">
</div>
</body>
</html>CSS / 마우스 오버 효과 / 다른 이미지 보여주기
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang='ko'> <head> <meta
www.codingfactory.net
'프레임워크 > CSS' 카테고리의 다른 글
| [CSS] display: none vs visibility: hidden (0) | 2022.03.08 |
|---|---|
| [CSS] Next.js에서 svg 사용하는 방법 (0) | 2022.02.24 |
| [CSS] :hover 시 transition 적용하기 (0) | 2022.02.23 |
| [CSS] relative와 absolute의 관계성, 차이점 (0) | 2022.02.23 |
| [CSS] CheckBox에 font-aswesome 사용해서 체크 표시 추가하기 (0) | 2022.02.23 |
댓글