CODEWITHSUNDEEP
htmlcsshover
John
John

Reputation: 1797

Display Responsive Overlay when hovering over image

I want to be able to display an overlay over an image when it is hovered over.

I want the overlay and the image to be responsive and adapt to the screen:

 width:100%;
 height:auto;

This is working on the actual image, but when ive tired to add i the overlay i cant seen to get the overlay responsive by using percentages.

Here is the demo: http://jsfiddle.net/w2NV3/

So when you drag the screen larger and smaller I want the image and the overlay to expand with the screen using %.

Cheers

Upvotes: 1

Views: 1475

Answers (2)

codingrose
codingrose

Reputation: 15699

Write:

.grid li {
    padding:0
}
#mainwrapper .box .slide-caption {
    width: calc(100% - 30px);
    height: calc(100% - 30px);
    text-align: left;
    padding: 15px;
    left: 100%;
}

Updated fiddle here.

Upvotes: 1

Bhetzie
Bhetzie

Reputation: 2932

Check out famcybox:http://webdesignandsuch.com/fancybox-image-overlay-packaged-for-download/

I think this is what you are looking for

Upvotes: 1

Related Questions