Text and image tint overlay hide on hover

[socalfoolina]

Help! Using this example: http://jsfiddle.net/robertolux/nSUqV/, I would like to add white text over the tinted image. On hover BOTH the text and tint hide, showing only the image which is a clickable link. Basically a reverse of the normal hover when usually a tint & text caption display. Here is my attempt as well: http://joydey.com/text-test/test1.html

Thanks!

[Paulie_D]

I can think of a couple of ways to go here.

My first question is, what is going to define the size of the element?

The image inside it or the text etc, to ‘overlay’ the image?

[socalfoolina]

The text character count will be relatively the same for each. I guess I would define the size of the element by the image… However this needs to work in a responsive design (bootstrap).

I’m open for suggestions and best practice. Thanks for your help!

[Paulie_D]

I’m no expert on Bootstrap but something like this..

http://codepen.io/Paulie-D/pen/RPRexz

[Author]

Posts