CODEWITHSUNDEEP
htmlcssflexbox
Mark
Mark

Reputation: 399

Text overlay on div issue

I have an image, and some text will float in the center of the image when hovered over.

I can get it to float properly with a single chunk of text within a <p>,
but when I add an <a> or something else in the <p>, it seems to want to indent the <a> to the right, which pushes the previous text to the left.

I've tried setting 0 for padding, margin, etc, anything that may help but I still don't understand how and why it is doing this. I know for one thing that the <a> isn't a block level element, so setting it to inline doesn't do anything...hmmm, anyone?

A live version of this is available at http://g4stly.com/servers.html
(hover over the images)

My code is as follows:

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}

#hightowerWrapper {
  display: inline-block;
  position: relative;
}

#hightowerText {
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}

#hightowerText a {
  display: inline;
}

#hightowerText p {
  padding: 0;
  margin: 0;
}

#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}
<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>

Upvotes: 1

Views: 290

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371251

An initial setting of a flex container is flex-direction: row. This means that flex items will line up horizontally, by default.

That's what's happening in your code. The flex container (#hightowerText) has multiple flex items (including anonymous flex items). They will line up in a row.

Override the default with flex-direction: column on the container.

#hightowerImage {
  width: 100vw;
  height: 63vw;
  padding: 0 0 0 0vw;
}

#hightowerWrapper {
  display: inline-block;
  position: relative;
}

#hightowerText {
  flex-direction: column; /* NEW */
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 1em;
  left: 1em;
  right: 1em;
  bottom: 1em;
  color: white;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
  text-align: center;
  padding: 0;
}

#hightowerText a {
  display: inline;
}

#hightowerText p {
  padding: 0;
  margin: 0;
}

#hightowerWrapper:hover #hightowerText {
  opacity: 1;
}
<div id="hightowerWrapper">
  <a href="#" id="hightowerA">
    <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

    <div id="hightowerText">
      Hightower! Classic plr_hightower map!<br> IP Address: hightower.g4stly.com<br> Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
    </div>
  </a>
</div>

Upvotes: 1

Sean Gregory
Sean Gregory

Reputation: 621

It doesn't look like your copy (text, links, etc) was in a p tag. Putting it into a single element works. See Fiddle below.

<div id="hightowerWrapper">
    <a href="#" id="hightowerA">
        <img id="hightowerImage" src="http://g4stly.com/images/hightowerImage.jpg" alt="Hightower Image">

        <div id="hightowerText">
            <p>

      Hightower!
                Classic plr_hightower map!<br>
                IP Address: hightower.g4stly.com<br>
        Click <a href="steam://connect/hightower.g4stly.com" id="IPHref">here</a> to join
          </p>
        </div>
    </a>
</div>

https://jsfiddle.net/35mu07ts/

Upvotes: 2

Related Questions