Search code examples
jqueryhtmlcssfade

Setting an element to fade its surroundings

I am trying to make an element fade its surroundings.Imagine the gray box is over the text. i would like the text that is surrounding the gray box have a fade affect.

So pretty much Fade the text around the box

Hope im making sense. Thanks for all your help!

HTML 

 <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Deseruntconsequatur nisi nulla odio eligendi sapiente rerum totam commodi          
    quae illo voluptatum soluta aut exercitationem debitis dicta ivermolestia
 </p>

 <div class="box"></div>

CSS

p {
   width: 250px;
  }

div.box {
   width: 50px;
   height: 50px;
   background-color: gray;
   position:absolute;
   top:0;
}

JSFiddle:https://jsfiddle.net/26t9mL47/

Solution

  • I would just use box-shadow on the box, set to the page background color to give the illusion that the text is fading out:

    https://jsfiddle.net/26t9mL47/2/