html – Set container box to a certain height?

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.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Example of Text Block Over Image</title>
      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%;
    <div class="box">
        <img class="img" src="/examples/images/kites.jpg" alt="Flying Kites">
        <div class="text">
            <h1>Flying Kites</h1>

Source link

Leave a reply

Please enter your comment!
Please enter your name here