다른 이미지 보여주기

CSS
Created 2021-03-23 Last Modified 2021-12-13

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다.

1 display 속성 이용하기
2 opacity 속성 이용하기

display 속성 이용하기

다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

<!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;
      }
    </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>

position 속성을 이용해서 두 이미지가 겹치게 만듭니다.

.jb-a {
  width: 400px;
  margin: 0px auto;
  position: relative
}
.jb-c {
  position: absolute;
  top: 0px;
  left: 0px;
}

두 번째 이미지를 보이지 않게 한 후, 마우스를 올렸을 때 나타나도록 합니다.

.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>

opacity 속성 이용하기

display 속성을 이용하면 이미지가 바로 바뀝니다. 만약 서서히 나타나고 사라지는 효과를 주고 싶다면 opacity 속성을 사용합니다.

.jb-c {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.jb-a:hover .jb-c {
  opacity: 1;
}

CSS

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성이다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여준다. hide : 빈 셀의 테두리를 숨긴다. initial : 기본값으로 설정한다. inherit : 부모 요소의 속성값을 상속받는다. 예제 첫 번째 표는 빈 셀의 테두리를 표시한다. 두 ...

CSS / Flex / justify-content

justify-content로 flex-direction으로 정한 방향으로의 정렬을 정합니다. 예를 들어 flex-direction의 값이 row라면 가로 방향의 정렬을 정합니다. 기본값은 flex-start로 시작점부터 아이템을 배치합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> * { ...

CSS / background-repeat / 배경 이미지 반복 여부 정하는 속성

개요 background-repeat로 배경 이미지의 반복 여부와 반복 방향을 정합니다. 기본값 : repeat 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit repeat : 가로 방향, 세로 방향으로 반복합니다. repeat-x : 가로 방향으로 반복합니다. repeat-y : 세로 방향으로 반복합니다. no-repeat : 반복하지 않습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> ...

CSS / Flex / IE에서 flex-basis 오류 해결하는 방법

Flex를 이용하여 다단 배열을 만들려고 합니다. 내용에 상관없이 같은 폭을 가진 다단 배열을 만든다면 flex-basis를 사용하는 게 편합니다. 아래는 Flex를 이용한 간단한 2단 배열입니다. box-sizing의 값을 border-box로 설정하고, flex-basis의 값을 50%로 하면 간단히 만들어집니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다. 두 방법 모두 아래처럼 이미지를 가운데에 놓습니다. 방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { text-align: center; } </style> </head> <body> <div> <img src="images/200x200.png" alt=""> </div> </body> </html> 방법 2 부모 요소를 사용할 수 없고 이미지만 스타일링이 가능하다면, img 요소를 block 요소로 만든 ...

CSS / content / 요소 앞 또는 뒤에 텍스트, 이미지 등 콘텐트 추가하기

content content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다. 예를 들어 p 요소 앞에 콘텐트를 넣으려면 다음과 같이 하고 p:before { content: xxx; } 뒤에 넣으려면 다음과 같이 한다. p:after { content: xxx; } 텍스트 추가하기 p 요소 앞에 Hello World를 추가한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / border-style / 테두리 모양 정하는 속성

CSS / 도형 만들기 / 원, 타원

CSS의 border-radius 속성으로 원을 만들 수 있다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만든다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣는다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...

CSS / font-weight / 글자 굵기 정하는 속성