상세 컨텐츠

본문 제목

HTML/CSS 이미지효과 - 마우스 오버시에 텍스트 보이기 예제소스

프로그래밍/HTML, CSS, JavaScript

by JOY [바가지] 2018. 8. 1. 23:00

본문

반응형

HTML/CSS 이미지효과

 

이미지에 마우스를 오버했을 경우 텍스트 문구가 보여지는 효과를 주는 예제를 알아 보도록 하겠습니다.

 

  전체소스

<!DOCTYPE HTML>
<head>
  <title></title>
  <style>
    .imgBoxDiv{
      width: 300px;
      height: 300px;
      position: relative;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 2px 2px 8px 0px #000;
    }

    .imgDiv{
      width: 100%;
      height: 100%;
      position: absolute;
      background: lightblue;
      z-index:1;
      -webkit-transition:all .5s ease;
      transition: all .5s ease;
      bottom:0px;
      overflow: hidden;
     }

     .imgBoxDiv:hover .imgDiv{
       bottom: 60px;
     }

     .imgDescDiv{
      width: 100%;
      height: 50px;
      padding:10px;
      color:#FFFFFF;
      background: #F2CB61;
      position: absolute;
      bottom:0px;
    }
  </style>

</head>
<body>

 <div class="imgBoxDiv">
      <div class="imgDiv"><img src="img-1.png"></div>
      <div class="imgDescDiv">이것은 사과 입니다.<div>
  </div>

</body>
</html>


  실습 - 예제결과

이미지 위로 마우스를 올렸을 경우 이미지가 올라가며 텍스트 문구가 보여지게 됩니다.

 

이것은 사과 입니다.

 

 

 

반응형

관련글 더보기

댓글 영역