그럼에도 불구하고

👨‍💻

[Visual Studio Code] 이미지 위에 글 띄우기 본문

HTML, CSS/Function implementation

[Visual Studio Code] 이미지 위에 글 띄우기

zenghyun 2022. 11. 7. 13:41

이미지에 커서를 갖다 대면, 그 위로 글을 띄워보자

 

 

 

 

test.html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <style>
   	   * {
  		  margin: 0;
  		  padding: 0;
  		  box-sizing: border-box;
		 }

   		.box{
   		 width: 200px; height: 200px; 
   		 background-color: darkcyan;
   		 border: 1px solid black;
  		  }
          
        .transformbox {
            margin: 10px;
            overflow: hidden;
        }
        .innerbox { transition: 0.4s;}
        .innerbox>img {margin: 0; padding: 0;}
        .innerbox>p {height: 200px; width: 200px; overflow: hidden; background-color: pink;}
        .transformbox:hover>.innerbox {  transform: translateY(-200px); }

        .positionbox{margin: 10px; overflow: hidden;
            position: relative;
            overflow: hidden;
        }
        .positionbox  p {position: absolute;
            transition: .4s;
            top:200px;
            /* z-index 높아지므로 이미지 위로 상자 이동 */
        }
        .positionbox:hover p {top:0px;}
    </style>
</head>
<body>
    <div class="box transformbox">
        <div class="innerbox">
            <img src="http://placekitten.com/200/200" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur.</p>
        </div>
    </div>

    <div class="box positionbox">
        <div class="innerbox">
            <img src="http://placekitten.com/200/200" alt="">
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur.</p>
        </div>
    </div>
</body>
</html>

 

 

 

결과

Document

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque placeat perspiciatis sapiente inventore expedita dolorum recusandae. Corrupti libero dolores aperiam architecto unde, voluptas ipsum reiciendis accusantium! Eos provident in consequuntur.

 

 

 

※ 1번의 방식과 2번의 방식의 애니메이션은 엄연히 다른 것임!

'HTML, CSS > Function implementation' 카테고리의 다른 글

[Visual Studio Code] mask 이용한 로고 만들기  (0) 2022.11.07
[Visual Studio Code] 애니메이션 반복하기  (0) 2022.11.07
[Visual Studio Code] transform-origin  (0) 2022.11.07
[Visual Studio Code] 여러가지 transform 이용해보기  (0) 2022.11.07
[Visual Studio Code] 여러가지 transition 사용해보기  (0) 2022.11.02
'HTML, CSS/Function implementation' Related Articles more
Comments