Overlay on responsive image

Question

So this is killing me.

I have looked at lots of forums but I can't seem to get any solutions to work.

Basically I have a grid of floated elements, each with a thumbnail image that on hover, has an overlay and text description of what that gallery contains (it's a typical looking folio site).

Usually I just have a fixed layout with an overlay box the same size as each image and a text container the same width which turns on and off on hover and thats fine. BUT - this is my first responsive version of the site and I have no idea how to make the size of the overlay and text match the dimensions of their parent.

I tried wrapping them all in a div but the child elements seem to ignore the parents dimensions anyway - presumably because they are floated.

I am using a fancybox gallery, the thumbnail image in question is marked with a comment but otherwise that works perfectly.

Is there a way to tell one div to match the width of another responsive img? Any help would be much appreciated.

Here is my html

<div class="flex_one">

   <div class="blackbox"><!--black low opacity box - appears on hover--></div>

   <div class="textcontainer"><h2>ART</h2></div> 

   <a class="fancybox-thumb" rel="gallery2" href="image1.jpg"><!--gallery image 1-->

   <img class="icon-image" src="thumb.jpg"  alt="main icon" /><!--This is the thumbnail image on page-->
</a>

   <a class="fancybox-thumb" rel="gallery2" href="image2.jpg"><!--gallery image 2-->
 </a>

This is my CSS

.flex_one {
    width:28%;
    height:auto;    
    float:left;
    background-color:#000;
    overflow:hidden;
    margin-left:4%;
    margin-top:4%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    .icon-image {
        width:100%;
        height:auto;
    }

    .blackbox {
        height:???;
        width:??;
        overflow:auto;
        opacity:0;
        background-color:#000;
        position: absolute;
        pointer-events:none;    
    }

    .textcontainer {
        width:??;
        margin-top:0px;
        height: 20px;
        background-color:rgba(0,0,0,0);
        pointer-events:none;
        position:absolute;
        background-color:transparent;
    }

    .textcontainer h2{
        text-decoration: none;
        font-size: 13px;
        font-family: 'Raleway', sans-serif; text-transform: uppercase;
        color:#FFF;
        z-index:80000;
        opacity:0;
        transform:scale(0);
    }

.flex_one:hover > .textcontainer h2 {
    transform:scale(1);
    opacity:1;
}

.flex_one:hover > .blackbox {
    opacity:.7;
}

score 0 · Answer 1 · answered Sep 02 '15 at 14:51

0

To get the size of a parent you could use a blank.png, a transparent picture into the same level which height and width you set to 100%.

Otherwise you could use jQuery like that:

$(document).ready(function(){
   $('.blackbox').each(function(){
        $(this).css({
           "height" : $(this).parent('flex_one').outerHeight(); 
           /* or height, outerHeight(true) */
           "width" : $(this).parent('flex_one').outerWidth();
           /* or width, outerWidth(true) */   
        });
   });
});

answered Sep 02 '15 at 14:51

myolli4

179
2
11

I don't quite understand what you mean about the blank.png. Even if it gave me the width and height, how would I get the overlay to mimc that?I tried the jQuery but I get a syntax error on the "height" line. Thank you so much for helping – Mr Toad Sep 02 '15 at 15:07
What does the error say? As I Said a blank png is a picture that is transparent. If You cant build your own search it via Google and im sure You get it. Set the Ratio of the blank png to width 100% and maybe the height to auto. To make it scalable. – myolli4 Sep 02 '15 at 15:14
Hey - I understand what a png and how to make one, I just didn't understand how once I got the width and height, I would make the child div match it. I actually solved it. gave flex_one a relative position, the .blackbox an absolute position with 100% width and height. – Mr Toad Sep 02 '15 at 15:57
Okay currently not Understand the exact Problem but If it Works :) – myolli4 Sep 02 '15 at 16:03

Overlay on responsive image

1 Answers1