Search code examples
cssimagetextoverlay

Text Block Not Overlaying at actual Bottom of Parent Div

I have an image that I've put into a div class "outer" that's cropped to a specific size. I've overlaid text in another div class "mythumbnail" using the styles shown. I'm stumped as to why I can't get the div "mythumbnail" to sit adjacent to the bottom of the picture in div "outer". I'd be grateful for assistance. Also, I want div "mythumbnail" to expand or contract depending on how much title and text there are regardless of "outer" dimensions, but always collapsing the height of div "mythumbnail" to the bottom of div "outer".

@import url('https://fonts.googleapis.com/css2?family=Changa+One:ital@0;1&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

h1,h2,h3{
    font-family: 'Changa One',Verdana, Geneva, sans-serif;
    font-weight: normal;    
}
p {
  padding: 0;
  margin: 0;
}
body {
  font-family:'Open Sans',Verdana, Geneva, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 1rem;
  background-color: #cfbaff;
}

.outer {
  height: 250px;
    width: 250px;
    background-color: #6561B8;
    background-size: cover;
    position: relative;
    text-align: center;
    color: white;
    padding: 0;
    margin: 0;
}
.outer img {
  height: 250px;
    width: 250px;
  object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
  padding: 0 .5rem 0;
  margin: 0;
}
.mythumbnail {
  margin: 0;
    padding: 0.3rem 0;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(0,0,0,0.4);

}
  
<html>
  <body>
    <div><h1>Image example</h1></div>
    <div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
      <div class="mythumbnail">
        <h2>Title</h2>
        <p>My fairly simple description that takes one or two lines...</p>
      </div>
    </div>
    <div><p>It should look something like this:</p>
        <img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
    </div>
  </body>

Solution

  • Change your thumbnail css to this:

    .mythumbnail {
  margin: 0;
  padding: 0.3rem 0;
  position: absolute;
  bottom: 0;
  right:0;
  left: 0;
  background-color: rgb(0,0,0,0.4);
}

    Note that right:0; and left:0; make div behave same like left:0; and width:100%;. It's up to you how you write it.