How to put a text over an image

Design help General
1

Hi guys,

I’m trying to create the next:
-A grid of thumbnails where every thumbnail contains an image and a text over it.
-Every thumbnail links to another page. (No problem)
-The text and image transparency vary when hover. (No problem)

I know how to create the different effects but I’m stuck at putting the text over the image.
It should work like in this case: Landscape and Structural Architecture Projects | Foster + Partners

So far I have a section with a row of columns. Every column contains a link block and inside an image with specific dimensions. However the different kinds of text (heading, paragraph, text block) cannot overlap the image. Of course I tried to make the text relative or absolute to the image and push it inside but it’s not enough since I need the text area to have the same dimensions as the image so they both change the style when hovering.

Thanks!

2

@franz this is how you can acheive that

  1. Create A div block inside the column and give it a class
  2. Set position to absolute and set width and height to 100%, This will make it overlap on the image
  3. Now place your text inside the div block
  4. Set display to none
  5. Now Create a new interaction and make to affect the div block
  6. Set trigger to hover
  7. Now hover over to display block and Hover out to display None

The down side is you have to create different div blocks for each column with different classes since you going to use interaction to achieve this effect.

Hope this helps.

2 Likes
3

hi @dannesh!

I followed your steps but unfortunately it’s not working. In this picture you can see what I’m trying to do:

1280×844 213 KB

The row of columns is set to 100% to be fully responsive and every image is set to 100% width and auto height to fill every column.

Actually it could be solved with a button with a background image and a link text but it doesn’t fit to my requirements. Every image has a different size and proportions I need to keep and I’m afraid the button background will crop some parts or create some white areas depending on the screen proportions. I’m sure it’s really simple to get but I’m missing something…

For the hover effect I think it’s easier than using interactions. Just by playing with the none and hover states of the class you already can get many cool effects.

4

By the way here there are some screen caps of a test:

1085×499 75.2 KB
1280×472 86.6 KB

The three pictures from the left they all have the same proportions (400x300 px). The two on the left are images and the two on the right are buttons with a picture set as a background. As you can see there is an extra red area (this is just the background color for testing) depending on the screen size for the buttons whilst the images adapt perfectly without cropping or adding new space

5

Maybe you’re missing something about the absolute positioning.

There is a mater rule for absolute positioning to work.

An element with position:absolute is positioned from the top left position of its CLOSEST POSITIONED PARENT.

So an element that you wan to see absolutely positioned must have a placed parent. So if you want to place a text over an image:

  • the first thing is to put them together inside a div
  • then give the div itstelf a position:relative
  • then give your text a position:absolute
  • then define top and left values for your text element (0 0 will place the text at the origin of the div)

Structure should look like:

div class=myDiv
img src=myImagePath
p class=myDefinitionText

Styles should look like:

div.myDiv {position:relative}
p.myDefinitionText {position:absolute; top 10px; left:20px} (adapt the values)

If you give position:absolute to an element that have no positioned parent, this will have no effect.

Once you master this simple rule, you wont have any position issue with html/css anymore.

9 Likes
6

@vincent you are so right! I didn’t pay attention to the fact that the parent also MUST be POSITIONED. Thanks a lot! You made my day!

7

Cool. I think I’m working on the same kind of behaviour right now:

498×701 461 KB

Benro* was my reference.

1091×971 187 KB