Spud
Spud
PostsComments
KPCKevin Powell - Community
Created by Spud on 1/28/2024 in #front-end
Making an image take the height of the div it is inside of
Thanks guys, with the help of Carl, I just gave the img tag inside the vidOverlayImg class a width of 100% and it did the trick. Also a margin-right of 10px is added in the video to the vidOverlayText class. I'm fine with how this performs, even if the image doesn't load for the user.
20 replies
KPCKevin Powell - Community
Created by Spud on 1/28/2024 in #front-end
Making an image take the height of the div it is inside of
Bump
20 replies
KPCKevin Powell - Community
Created by Spud on 1/28/2024 in #front-end
Making an image take the height of the div it is inside of
Code HTML 
<a href="/level-design/halo-infinite/titanium.html">
  <div class="vidContainer">
    <video autoplay loop><source src="/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      <div class="vidOverlay">
        <div class="vidOverlayText">
          <p><strong>Titanium</strong><p>
          <p><strong>Fast-paced</strong> competitive 4v4 map utilizing a <strong>rotational layout</strong> set near a Titanium mine.</p>
          <ul class="tags tagsVideo">
            <li class="tagOrig">Original</li>
            <li class="tagSolo">Solo</li>
            <li class="tagSize">4v4</li>
            <li class="tagMap">Map</li>
          </ul>
        </div>
        <div class="vidOverlayImg">
          <img src="/assets/haloinfinite_small.png">
        </div>
    </div>
  </div>
</a>
<a href="/level-design/halo-infinite/titanium.html">
  <div class="vidContainer">
    <video autoplay loop><source src="/assets/video.mp4" type="video/mp4">Your browser does not support the video tag.</video>
      <div class="vidOverlay">
        <div class="vidOverlayText">
          <p><strong>Titanium</strong><p>
          <p><strong>Fast-paced</strong> competitive 4v4 map utilizing a <strong>rotational layout</strong> set near a Titanium mine.</p>
          <ul class="tags tagsVideo">
            <li class="tagOrig">Original</li>
            <li class="tagSolo">Solo</li>
            <li class="tagSize">4v4</li>
            <li class="tagMap">Map</li>
          </ul>
        </div>
        <div class="vidOverlayImg">
          <img src="/assets/haloinfinite_small.png">
        </div>
    </div>
  </div>
</a>
CSS 
.vidContainer {
    position: relative;
    width: 100%;
    margin: 10px 10px 0 0;
    outline: 1px solid green;
}

.vidOverlay {
    position: absolute; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    transition: .3s ease;
    opacity:0.9;
    padding: 10px 15px;
    text-align: left;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    outline: 1px solid blue;
    display:flex;
}

.vidOverlayText {
    outline: 1px solid red;
}

.vidOverlayImg {
    outline: 1px solid yellow;
}

@media only screen and (max-width: 550px) {
    .tagsVideo {
        display: none;
    }
}
.vidContainer {
    position: relative;
    width: 100%;
    margin: 10px 10px 0 0;
    outline: 1px solid green;
}

.vidOverlay {
    position: absolute; 
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    transition: .3s ease;
    opacity:0.9;
    padding: 10px 15px;
    text-align: left;
    box-sizing: border-box;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    outline: 1px solid blue;
    display:flex;
}

.vidOverlayText {
    outline: 1px solid red;
}

.vidOverlayImg {
    outline: 1px solid yellow;
}

@media only screen and (max-width: 550px) {
    .tagsVideo {
        display: none;
    }
}
20 replies