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

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>

</body>
</html>

실습 - 예제결과

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

이것은 사과 입니다.

저작자표시비영리변경금지

'프로그래밍 > HTML, CSS, JavaScript' 카테고리의 다른 글

[JavaScript] 원하는 부분 프린터 하기-print() (2)	2019.02.01
자바스크립트 replace 문자 모두 바꾸기 - 예제/실습 (5)	2018.09.28
HTML/CSS 이미지효과 - 마우스 오버시에 텍스트 보이기 예제소스 (6)	2018.08.01
체크박스 클릭 시 해당 테이블 줄 배경색 변경하기 (6)	2018.07.25
[HTML/CSS] DIV 중앙, 가운데 배치하기 (6)	2018.07.01
[JavaScript] 펼쳐지는 세로 트리메뉴 쉽게 만들기 (3)	2018.06.25