CODEWITHSUNDEEP
htmlcssimage
user3750597
user3750597

Reputation:

Overlay Figcaption on Img

I run a website and I am trying to add copyright information to the top-left corner of an image. The img element is float:left; and the figcaption element is located after the img element, but I have a few issues:

1) If I use the position:absolute CSS style on the figcaption element, it will overlay the caption on the image, like I want. However, if I have multiple images listed one after each other, the captions no longer go to the top-left corner and may be positioned in random positions on the page.enter image description here

2) If I use the position:relative CSS style on the figcaption element, it will place the caption next to the image. This can be fixed when I add left:-410px; to the figcaption CSS because all images are the same width. However, the p element that is setup to wrap beside the img element will leave a gap were the figcaption was originally positioned.enter image description here

My question is, how can I get the figcaption in the top-left corner of the img element without affecting the p element's wrapping or indenting?

Code sample: https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/

Upvotes: 4

Views: 16092

Answers (1)

j08691
j08691

Reputation: 207901

I believe this is what you're after:

img {
  width: 400px;
  clear: left;
  margin-bottom: 1px;
  margin-right: 10px;
}

figcaption {
  background-color: black;
  color: white;
  max-width: 400px;
  font-size: 10px;
  display: block;
  float: left;
  position: absolute;
  top: 0;
}

figure {
  position: relative;
  float: left;
}
<figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">
  <figcaption>Copyright Here</figcaption>
</figure>
<figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">
  <figcaption>Copyright Here</figcaption>
</figure>
<p>This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected
  by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should
  not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around
  the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should
  be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This
  test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.</p>

You should position the <figcaption> element absolutely, and then position the <figure> relatively. Absolutely positioned elements are positioned with respect to their closest positioned ancestor, which is why you want the relative positioning on the figure. Then, float the figures instead of the images.

Upvotes: 11

Related Questions