html – Set container box to a certain height?

0
76
html - Animation after toggling doesn't apply the second style


I want the ‘.box’ to be 33% of height. However, trying to set it below, doesn’t work. It a container box, meaning it holds an image and a text hovering over the image. When the box is at 33%, I want the image to crop down and show only 33% of it.

https://www.tutorialrepublic.com/codelab.php?topic=faq&file=placing-text-over-an-image-with-css

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
<style>
    .box{
      margin-top: 100px;
      width: 100%;
      height: 33%;
        position: relative;
    }
    .box .text{
        position: absolute;
        z-index: 2;
        text-align: center;
        top: 0;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        height: 100%;
        width: 100%; /* Set the width of the positioned div */
    }
  .img {
    width: 100%;
  }
</style>
</head> 
<body>
    <div class="box">
        <img class="img" src="/examples/images/kites.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>
        </div>
    </div>
</body>
</html>



Source link

Leave a reply

Please enter your comment!
Please enter your name here