Image Gallery in css

HTML & CSS
1

here gives a codes of image gallery. The picture is caption which is the title of the < a >. But that caption is appearing at left-bottom in white space of image. Please guide me that how we can take this caption below the image.

2

The caption IS below the image. You’ll need to be more specific.

3

My English is weak. I am not understanding what you are exactly saying.

4

I’m not sure if this is what you meant but try this:

ul.polaroids a:after {
  content: attr(title);
  margin: 15px 0 0;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
}
1 Like
5

I just put ul.polaroids a:after { display: block; }
And I get solution. The caption is now appearing below the image. Thank you so muck

6

But please explain me by putting display:block how the caption comes below the image.

7

Content placed with :after is added as though it were inline content (like text) and placed at the end of the content. If the content before it is inline also then they will all stay on the same line assuming room.

If you add display;block you move the :after element on to a new line.

However, you must have some different rules to the example link as that one also needed position:absolute to move it below the white background.

1 Like
8

ok. I get it. But when i add ul.polaroids img {display:block}
then also the caption appeared under the image.
But actually we have to set ul.polaroids a:after {display:block}

9

As I said it depends on what you have going on. :smile:

If the image is block then any text after the image should start on a new line. Images are inline elements by default and text will line up alongside unless either the text or the image is set to block.

1 Like
10

I got it. Thank you.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.