0

I'm trying to put a small box of text overtop of an image, with a header and paragraph following the image. Right now the floating box is disrupting the header, because the header is supposed to be centered but is getting pushed to the left.

Is this the best way to have a piece of text floating over an image? 

.cell {
  margin-top: 8px;
  vertical-align: middle;
}

.galleryPic {
  width: 80%;
  max-width: 388px;
  height: 100%;
  max-height: 220px;
}

.imgDate {
  top: -8vw;
  right: 12vw;
  color: white;
  background-color: red;
  width: 20vw;
  position: relative;
  z-index: 99;
  text-transform: uppercase;
  margin: 15px;
  float: right;
  padding: 1vw 2vw;
}

.cell h3 {
  position: relative;
  text-align: center;
}

.cell p {
  position: relative;
}
<div class="cell">
  <img class="galleryPic">
  <div class="imgDate">Jan 9, 2019</div>
  <h3>Header</h3>
  <p>Paragraph</p>
</div>
blurfus
  • 13,485
  • 8
  • 55
  • 61
Adam Weiler
  • 561
  • 6
  • 15

1 Answers1

0

Let me know if this is what you're going for. If you don't need to use the

<img>

tag, this is how I would do it. 

.cell {
  display: grid;
  justify-content: center;
}

.img {
  height: 300px;
  width: 300px;
  background: url('https://unsplash.it/300/300');
}

.galleryPic {
  width: 80%;
  max-width: 388px;
  height: 100%;
  max-height: 220px;
}

.imgDate {
  color: white;
  background-color: red;
  position: relative;
  z-index: 99;
  text-transform: uppercase;
  margin: 15px;
  padding: 1vw 2vw;
}

.cell h3 {
  text-align: center;
}

.cell p {
  text-align: center;
}
<div class="cell">
  <div class="img">
    <div class="imgDate">Jan 9, 2019</div>
  </div>
  <h3>Header</h3>
  <p>Paragraph</p>
</div>

For information on when to use the <img> tag and when to use CSS background property this link will help. If you have any questions about what I changed and why I changed it feel free to ask!

Joey Breithaupt
  • 85
  • 5
  • An answer should always contain the essence of the solution. If not, and when external resources either is changed or dies, so does the value of the answer. Let me know if you made the edit and I will reconsider my downvote. – Asons Dec 02 '18 at 11:41
  • 1
    That makes sense, I didn't really think about somebody else looking to this post for the answer. And if I were to ever delete the pen they obviously wouldn't be able to find it. Edited the post, hopefully that's what you meant. – Joey Breithaupt Dec 02 '18 at 11:54