CODEWITHSUNDEEP
htmlcss
user140291
user140291

Reputation:

Div overlay on a responsive image

http://jsfiddle.net/LFtHg/

I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.

I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?

Thank you, J

Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.

Upvotes: 1

Views: 6310

Answers (2)

Ana
Ana

Reputation: 37179

First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.

Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)

Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).

Upvotes: 3

Oleg
Oleg

Reputation: 24998

Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:

.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}

You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.

BTW, you know that your implementation is not yet liquid, right?

Upvotes: 1

Related Questions