다른 이미지 보여주기

CSS

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 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 / list-style-position / 목록의 마커 위치 정하는 속성

개요 list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 list-style-position: inside | outside | initial | inherit inside : 문단 안쪽에 놓습니다. outside : 문단 바깥쪽에 놓습니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문을 꾸미는 여러 가지 예제입니다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / content / 요소 앞 또는 뒤에 문자열 등 콘텐트 만들기

content 속성은 선택한 요소의 내용 앞이나 뒤에 콘텐트를 붙입니다. 예를 들어 p 요소 내용 앞에 콘텐트를 넣으려면 p:before { content: xxx; } 와 같이 하고, 뒤에 붙이려면 p:after { content: xxx; } 와 같이 합니다. content 속성을 이용하여 XXX라는 문자열을 넣으려면 다음과 같이 합니다. p:before { content: "XXX"; } 이미지를 넣고 싶다면 다음과 같이 합니다. p:before { content: ...

CSS / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣는 방법입니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법입니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결하는 방법입니다. Inline Style Sheet Inline Style Sheet는 HTML 태그의 ...

CSS / font-size / 글자 크기 정하는 속성

CSS / background-size / 배경 이미지의 가로 크기와 세로 크기를 정하는 속성

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

개요 box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 box-sizing: content-box | border-box | initial | inherit content-box : 콘텐트 영역을 기준으로 크기를 정합니다. border-box : 테두리를 기준으로 크기를 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / table-layout / 표(table) 크기 고정시키기

표(table)는 width 속성으로 가로 크기를 정할 수 있습니다. 다음은 가로 크기가 500px인 간단한 표입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 500px; } td { padding: 10px; border: 1px solid #666666; } </style> </head> <body> <table> <tr> <td class="c1">HAHAHA</td> <td class="c2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.</td> </tr> </table> </body> </html> 표 ...

CSS / 체크박스(checkbox)와 라벨(label) 높이 조정하기

체크박스와 라벨 체크박스(checkbox)와 라벨(label)을 나란히 놓았을 때, 높이가 잘 맞지 않는 경우가 발생합니다. 높이를 조정하는 방법은 여러 가지가 있는데, 그 중 하나는 position 속성을 이용하는 것입니다. position 속성의 값을 relative로 정한 후 top 속성의 값을 적절히 정하면 됩니다. checkbox를 옮길 수도 있고 label을 옮길 수도 있습니다. 예제 다음은 높이를 조정하는 간단한 예제입니다. 첫 번째 체크박스와 라벨은 아무런 ...

CSS / font-style / 글자 모양 정하는 속성

개요 font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-style: normal | italic | oblique | initial | inherit normal : 보통 모양입니다. italic : 기울임꼴입니다. oblique : 기울임꼴입니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. italic은 필기체 느낌으로 기울이고, oblique는 보통 모양을 그대로 기울입니다. 아래의 이미지에서 두번째 줄이 italic, 세번째 ...

CODING FACTORY

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

display 속성 이용하기

opacity 속성 이용하기

Related Posts