Hello lads,

So i'm struggeling with the following. I want to get the text a little bit closer to the image, but since the image has whitespace itself and I don't want to redo them all, I opted for adding a negative margin to the text.

It seemed to work, but what happens is that the text appears behind the image. I have tried googeling this problem and I've added z-indexes to both elements but nothing has helped. This is probably due to the reasonably complex nature of this template, but maybe there is an easy fix, and I would love to know and learn!

Here is the website that I'm working on and a screenshot of the problem since I obviously can't have a live version of the bug.


Screenshot: https://dl.dropboxusercontent.com/u/21426520/Screen%20Shot%202016-02-08%20at%2015.03.03.png

Hope someone can help me out.


Recommended Answers

All 4 Replies

One solution is to crop the bottom of the image so that the text appears. Another solution is to create a div. Use the image as the background of that div and put text inside that div. The HTML of that div will be like: <div><p>Text</p></div>

Hi Sean, the text is already placed in a div with the class info.

.thumbnail .info

with the negative margin, also add "position: relative"

Hi Ryan,

That works! Thank you!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.