Highlight The Div Content With Onscreen Guide

I want to highlight element on which arrow is pointing while using the onscreen guide for displaying instructions here is the link for the fiddle Fiddle Some of code from fiddle is

Solution 1:

You need to tweak your styles a little bit to achieve this.

Add margin to your overlay div so the main is visible. Likewise, adjust the position of the arrow and the corresponding text to get it to an appropriate position.

Note that this solution wont work if the box is visually inside as in the carmin demo.

updated jsFiddle

Updated CSS:

*{
    margin: 0px;
    padding: 0px;
}

#overlay{
    font-family: "Comic Sans MS", cursive, sans-serif;
    position: fixed;
    width: 100%;
    height: 100%;
    margin-top: 120px;
    z-index: 999999;
    background-color: #000;
    opacity:0.5;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#overlayp, #overlayimg{
    position: relative;
}

#overlayp{
    color: blue;
}

#instruction1{
    top: 50px;
    left: 400px;
}

#arrow1{
    width: 100px;
    position: relative;
    top: -30px;
    left: 150px;
}

#instruction2{
    top: -10px;
    left: 225px;
}

#dismiss{
    font-size: 12px;
}
.shome{
    display: block;
}
main{
    z-index: 0;
}

maindiv{
    padding: 50px;
    background: rgb(0,120,170);color:#fff;
    z-index: 9999999;
    opacity: 0.8;
}

Solution 2:

Hope this is what you want. I have remove this.style.display = "none"; from the overlay block. Now it is working.

$("#overlay").on("click",function(){
     $("#clk").show();
     // $("#overlay").hide(); //Add this line if you need same behaviour while click on overlay.
});

$("#clk").on("click", function(){
    $("#overlay").show(); 
    $("#clk").hide();
});

Solution 3:

Didn`t understand what did u mean. Maybe u just need to correct your styles,like this fiddle

Solution 4:

I have added a class glow to your div and add the same on the click and removed the same when overlay.

$("#overlay").on("click", function(){
  this.style.display = "none";
     $("#clk").show();
    $("#maincont").removeClass("glow");
});

$("#clk").on("click", function(){
    $("#overlay").show(); 
    $("#maincont").addClass("glow");
    $("#clk").hide();
});

*{
  margin: 0px;
  padding: 0px;
}

#overlay{
  font-family: "Comic Sans MS", cursive, sans-serif;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: #000;
    opacity:0.5;
 -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

#overlayp, #overlayimg{
  position: relative;
}

#overlayp{
  color: blue;
}

#instruction1{
  top: 50px;
  left: 400px;
}

#arrow1{
  width: 100px;
  position: relative;
  top: 100px;
  left: 150px;
}

#instruction2{
  top: 100px;
  left: 225px;
}

#dismiss{
  font-size: 12px;
}
.shome{
    display: block;
}
main{
  z-index: 0;
}

maindiv{
  padding: 50px;
  background: rgb(0,120,170);color:#fff;
     z-index: 1;
  opacity: 0.8;
}
.glow{
  opacity: 1;
  z-index: 2;
  color: white;
  position: relative;  

}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divid="overlay"style="display:none"><pid="instruction1">This is some instruction.<br/><spanid="dismiss">(tap to dismiss)</span></p><imgid="arrow1"src="http://pixabay.com/static/uploads/photo/2013/07/13/10/13/arrow-156792_640.png" /><pid="instruction2">This is something cool!</p></div><main><divid="maincont">This is my main content.</div></main><br/><divstyle="cursor:pointer;background:rgb(0,120,190);color:#fff;padding:10px;width:25%;text-align:center"id="clk">Click to see Instructions.</div>

PS. Your image of the arrow is blocked in this snippet sorry for that

Solution 5:

Animating the element your mouse is on, can be done e.g. using .hover from jquery:

$("#maincont").hover(  
   function() {    
       $( this ).addClass( "hover" );  
   }, 
   function() {    
       $( this ).removeClass( "hover" );  }
);

Although at the moment your overlay div prevents the trigger to fire, because the maincont is "behind" the overlay. It might be necessary to rethink the design.

EDIT: Maybe it´s a better aproach to implement some kind of "at mouse position" tooltip mode, which can be activated and show the informations in a mouse-near info div. Changing the mousecursor to

cursor: help;

CSS property would additionally help to difference between the two modes