Kaloyankerr

Kermit the frog

Nov 18th, 2020 (edited)
866
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.57 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Web Programming</title>
  7.     <link rel="icon" href="https://convertico.com/images/1605706365.5168/download.ico">
  8.  
  9.     <title>Title of the document</title>
  10.  
  11.     <style>
  12.       .example {
  13.         position: relative;
  14.         padding: 0;
  15.         width: 300px;
  16.         text-align: center;
  17.         display: block;
  18.         cursor: pointer;
  19.         overflow: hidden;
  20.       }
  21.       .content {
  22.         opacity: 0;
  23.         font-size: 40px;
  24.         position: absolute;
  25.         top: 0;
  26.         left: 0;
  27.         color: #ffffff;
  28.         background-color: rgba(0, 255, 98, 0.5);
  29.         width: 300px;
  30.         height: 300px;
  31.         -webkit-transition: all 400ms ease-out;
  32.         -moz-transition: all 400ms ease-out;
  33.         -o-transition: all 400ms ease-out;
  34.         -ms-transition: all 400ms ease-out;
  35.         transition: all 400ms ease-out;
  36.         text-align: center;
  37.       }
  38.       .example .content:hover {
  39.         opacity: 1;
  40.       }
  41.       .example .content .text {
  42.         height: 0;
  43.         opacity: 1;
  44.         transition-delay: 0s;
  45.         transition-duration: 0.4s;
  46.       }
  47.       .img-container {
  48.       text-align: center;
  49.       }
  50.     </style>
  51.   </head>
  52.  
  53.   <body>  
  54.     <h2>This is Kermit the frog</h2>
  55.     <div class="example">
  56.       <img src="download.jpg" width="300" height="300"/>
  57.       <div class="content">
  58.         <div class="text">I'm Kermit the frog</div>
  59.       </div>
  60.     </div>
  61.   </body>
  62. </html>
  63.  
Add Comment
Please, Sign In to add comment