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>


  실습 - 예제결과

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

 

이것은 사과 입니다.

 

 

 

Posted by JOY [바가지]

댓글을 달아 주세요

  1. kangdante 2018.08.02 08:49 신고  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다
    티스토리를 잘 운영하려면
    HTML의 기초는 배워야 할 것 같아요.. ^^

  2. 은이c 2018.08.04 23:26 신고  댓글주소  수정/삭제  댓글쓰기

    이거는 쉽게 할수있겠네요~ ㅎㅎ
    토요일 저녁 시원하게 보내세요~~ ^^

  3. 잉여토기 2018.08.05 11:31 신고  댓글주소  수정/삭제  댓글쓰기

    누구에게 사과하고 싶을 때
    이 이미지를 보여주면 좋겠네요.
    마우스를 올려보라 하고
    밑에 '이것은 사과입니다.' 대신 진심 어린 짧은 사과글을 보여주면 좋을 듯해요.

  4. Anchou 2018.08.06 05:33 신고  댓글주소  수정/삭제  댓글쓰기

    아하!
    워드프레스에서 슬라이드바 같은 기능이네요!
    이런 프로그램 언어 정보 너무 감사합니다.^^

  5. 청결원 2018.08.06 06:35 신고  댓글주소  수정/삭제  댓글쓰기


    무더운 한주 시작 입니다
    좋은 시작 하시고 포스팅 잘 보고 갑니다~

  6. 발랄제시카 2018.08.07 13:19 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보 감사합니다.



티스토리 툴바