CODEWITHSUNDEEP
javascripthtmlcss
Andrzej Gis
Andrzej Gis

Reputation: 14306

Dynamically add div over image

I'm creating a website plugin that will display additional information over images in a div - lets call it wrapper. The wrappers will be added and later loaded on many external pages dynamically. That's why I have to meet some strict requirements.

The wrapper always should exactly overlap the image (needed for proper positioning items in this wrapper). Especially in the following cases:

  1. When page content changes (page's elements sizes and positions accordingly) the wrapper should still overlap it's image
  2. When image size changes
  3. When user changes resolution / zooms in / zooms out the page

I need to handle the case when page uses chained (?) style rules like so: 

.someelement img{ important styles }

I think this disqualifies wrapping an image with a div as it would break the original image style.

What will be the right way to go?

EDIT

A little clarification on wrapping image with additional div. Lets say the client wants to modify image styled this way (a rectangle):

.myclass p img{
  width: 250px;
  height: 150px;
}
<div class="myclass">
  <p>
    <a href="stackoverflow.com">
      <img src="http://placehold.it/150x150" />
    </a>
  </p>
</div>

If I wrap the image with img-holder like Praveen Kumar suggested the image looses it's original style (now it's a square). It turns out that the paragraph tag breaks it.

<!-- client css, cannot be modified -->
.myclass p img{
  width: 250px;
  height: 150px;
}

<!-- my css, can be modified -->

.img-holder {position: relative; display: inline-block; z-index: 1;}
.img-holder .img-mask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(255,255,255,0.2);}
.img-holder img {display: block; position: relative; z-index: 1;}
<div class="myclass">
  <p>
    <a href="stackoverflow.com">
      <div class="img-holder">
        <div class="img-mask">Mask</div>
        <img src="http://placehold.it/150x150" />
      </div>
    </a>
  </p>
</div>

Upvotes: 0

Views: 639

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

You can put the image with a parent div of inline-block display and well... I can show the demo here:

.img-holder {position: relative; display: inline-block; z-index: 1;}
.img-holder .img-mask {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(255,255,255,0.2);}
.img-holder img {display: block; position: relative; z-index: 1;}
<div class="img-holder">
  <div class="img-mask">Mask</div>
  <img src="http://placehold.it/150x150" />
</div>

  • The parent should have inline-block display to adjust according to the image.
  • The image should have a block or inline-block display to make sure it doesn't put any extra spaces.
  • The mask should have position: absolute.

This will expand to the size of the img as well as it fits the image correctly. Check it out.

Upvotes: 1

Related Questions