CSS overlay positioning issue

Question

I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.

I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 50%;
  height: auto;
}


/* This is what I have been using with to move it. */

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  /* This will move wherever */
  right: 0;
  background-color: darkblue;
  overflow: hidden;
  width: 50%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap;
  color: red;
  font-size: 20px;
  font-family: cursive;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="container">
  <img src="image is here" alt="Avatar" class="image"> This won't move
  <div class="overlay">
    <div class="text"><u>This is just here atm</u></div>
  </div>
</div>

Hi, welcome to stack Overflow, please read the following: https://stackoverflow.com/help/how-to-ask as it will help you to ask questions that poeple on this site can help you with. — Dylan Anlezark, Nov 17 '19 at 22:31
Possible duplicate of [How to overlay one div over another div](https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) — jainashish, Nov 17 '19 at 22:31
Does this answer your question? [How to center absolutely positioned element in div?](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) — Celius Stingher, Nov 18 '19 at 00:09
Please edit the question to include an image so we can reproduce what's happening. I added a snippet, so just click the edit snippet link and use a placeholder for the image `src` (something like https://via.placeholder.com/300) <-- the `300` is the width and height of the image. — disinfor, Nov 18 '19 at 13:27

score 0 · Accepted Answer · answered Nov 18 '19 at 15:25

0

I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.

answered Nov 18 '19 at 15:25

user12388433

1
2

CSS overlay positioning issue

1 Answers1