JQuery image overlay?

Question

JQuery image overlay?

I am looking to overlay an image in the right corner on another image using jquery.

Basically, I want the second image to appear on top of another image in the right corner when the user mouse hovering over the image, and then disappear when they stop hovering over it. How can I achieve this with jQuery?

+7

javascript jquery html css

Skizit May 24, '11 at 17:49

source share

5 answers

You do not need jQuery for this, you can use CSS for this, for example

 <a href="#" class="my-overlay">My Overlay</a>

CSS

 a.my-overlay { background: url('/images/first-image.jpg') no-repeat; width: 100px;/*width: of image*/; height: 100px;/*height of image*/; display: block; text-indent: -1000px; overflow: hidden; } a.my-overlay:HOVER {background: url('/images/second-image.jpg') no-repeat; }

It is much simpler and acceptable for everyone.

+4

Senad meškin May 24, '11 at 17:57

source share

Suppose your first image is wrapped inside a div.

1 / Add another div with the "display: none" style and the class of your choice 2 / When you hover the img cursor (if it was not done earlier) on the div 3 / slideToggle div that contains the second image and voila!

 $('div .firstImage').hover(function(){ $('.secondImage').slideToggle(); });

Of course, you need to set the correct positioning style in the div containing the second image.

+1

Jibou May 24, '11 at 18:00

source share

Here is a simple way I did this, following the Thomas code above. In my case, I wanted to impose an overlay (mostly a gray box with a big plus sign) on the image, which displays it with a mouse click and enlarges the sketch in the lightbox. I need to do this a lot, so I use classes, not identifiers.

My image and overlay image are the same size. .hide simply hides the overlay until the hover function shows it.

I do not show materials in the lightbox, therefore it is clearer for this problem.

Note that a.hoverTrigger also wraps .overlay img. If you do not, you will get a terrible flickering effect.

Markup:

 <div class="merchImg"> <a href="#" class="hoverTrigger"><img src="_img/_new-store/item.png" /></a> <a href="#" class="hoverTrigger"><img class="overlay hide" src="_img/_new-store/overlay.png" /></a> </div>

CSS

 .merchImg { position: relative; } .merchImg .overlay { position: absolute; top:0; left:0; }

JQuery

 $(".hoverTrigger").mouseenter(function() { $(this).parent().find('a .overlay').show(); }); $(".hoverTrigger").mouseleave(function() { $(this).parent().find('a .overlay').hide(); });

+1

flipthekid Jan 14 '13 at 2:22

source share

We can also achieve this using the jquery.ImageOverlay.js plugin.

here is an example for this.

ASPX Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link rel="stylesheet" media="screen" type="text/css" href="Styles/ImageOrverlay.css" /> <script type="text/javascript" src="Scripts/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="Scripts/jquery.metadata.js"></script> <script type="text/javascript" src="Scripts/jquery.ImageOverlay.js"></script> </head> <body> <form id="form1" runat="server"> <h1> jQuery Image Overlay</h1> <fieldset> <legend><b>Without any options : </b></legend> <ul id="firstGallery" class="image-overlay"> <li><a href="http://www.yahoo.com"> <img alt="Palm Tree" src="Images/palmtree.jpg" /> <div class="caption"> <h3> Write a Title Here</h3> <p> Put a Caption Here</p> </div> </a></li> <li><a href="http://www.google.com"> <img alt="Iguana" src="Images/iguana.jpg" /> <div class="caption"> <h3> Another Title</h3> <p> click for more info</p> </div> </a></li> <li><a href="http://www.google.com"> <img alt="Ceynote" src="Images/ceynote.jpg" /> <div class="caption"> <h3> Just a Title Here</h3> </div> </a></li> </ul> </fieldset> <br /> <br /> <fieldset> <legend><b>With options set (border_color, overlay_origin, overlay_color, and overlay_text_color, overlay_speed, overlay_speed_out) : </b></legend> <ul id="secondGallery" class="image-overlay"> <li><a href="http://www.mozilla.com/"> <img alt="firefox" src="Images/firefox-512-200x200.png" /> <div class="caption"> <h3> Get Firefox</h3> </div> </a></li> <li><a href="http://www.mozilla.com/"> <img alt="jungle" src="Images/jungle.jpg" /> <div class="caption"> <h3> Tall Overlay</h3> <p> The overlay height is based upon the content it contains</p> </div> </a></li> </ul> </fieldset> <br /> <br /> <fieldset> <legend><b>Advanced Usage, utilizing the <a href="http://plugins.jquery.com/project/metadata"> metadata plugin</a> : </b></legend> <ul id="thirdGallery" class="image-overlay { overlay_speed: 'slow' }"> <li><a class="{ animate: false, overlay_origin: 'top' }" href="http://www.balupton.com/sandbox/jquery_lightbox_bal/demo/"> <img alt="bamboo" src="Images/bamboo.jpg" /> <div class="caption"> <h3> Connect to a Lightbox</h3> <p> overlay origin is overridden, not animated</p> </div> </a></li> <li><a class="{ overlay_speed: 'fast', overlay_speed_out: 'slow' }" href="http://www.mozilla.com"> <img alt="Ships" src="Images/josh-ships.jpg" /> <div class="caption"> <h3> &#39;Ships&#39; by Josh Neal</h3> <p> different in/out speeds</p> </div> </a></li> <li><a class="{ border_color: 'green', overlay_color: '#ccffcc', overlay_text_color: 'green', overlay_speed: 'fast', always_show_overlay: true }" href="http://www.mozilla.com/"> <img alt="cypress" src="Images/cypress.jpg" /> <div class="caption"> <h3> Digg This!</h3> <p> colors, overlay speed overridden, overlay always open</p> </div> </a></li> </ul> </fieldset> <script type="text/javascript"> // JavaScript for the Image Overlay galleries. $("#firstGallery").ImageOverlay(); $("#secondGallery").ImageOverlay({ border_color: "#FF8000", overlay_color: "#610B38", overlay_origin: "top", overlay_text_color: "#FF8000", overlay_speed: 'fast', overlay_speed_out: 'slow' }); $("#thirdGallery").ImageOverlay(); </script> </form> </body> </html>

==================================================== ============================

CSS:

 .image-overlay { list-style: none; text-align: left; } .image-overlay li { display: inline; } .image-overlay a:link, .image-overlay a:visited, .image-overlay a:hover, .image-overlay a:active { text-decoration: none; } .image-overlay a:link img, .image-overlay a:visited img, .image-overlay a:hover img, .image-overlay a:active img { border: none; } .image-overlay a { margin: 9px; float: left; background: #fff; border: solid 2px; overflow: hidden; position: relative; } .image-overlay img { position: absolute; top: 0; left: 0; border: 0; } .image-overlay .caption { float: left; position: absolute; background-color: #000; width: 100%; cursor: pointer; /* The way to change overlay opacity is the follow properties. Opacity is a tricky issue due to longtime IE abuse of it, so opacity is not offically supported - use at your own risk. To play it safe, disable overlay opacity in IE. */ /* For Firefox/Opera/Safari/Chrome */ opacity: .8; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .image-overlay .caption h1, .image-overlay .caption h2, .image-overlay .caption h3, .image-overlay .caption h4, .image-overlay .caption h5, .image-overlay .caption h6 { margin: 10px 0 10px 2px; font-size: 20px; font-weight: bold; padding: 0 0 0 5px; } .image-overlay p { text-indent: 0; margin: 10px; font-size: 1em; }

Downloads: Follow this link to download .js files and image files and a live example implementation in different ways.

http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html

0

Jayesh sorathia Jan 05 '13 at 6:31

source share

Thomas shields · Accepted Answer · 2011-05-24T18:01:19+0000

@ Senad is absolutely right, you do not need jQuery for this. However, if you have a more complicated situation and are looking for similar functionality, try:

Wrap them in the containing element. Set the containing element to position:relative Set the overlay image to position:absolute; top:0; left:0; position:absolute; top:0; left:0; and create the height and width as you like ... then use jQuery to handle the hang event ... HTML:

 <div> <img id="main" src="myimg" /> <img id="overlay" src="myimg" /></div>

CSS:

  div { position:relative; } #main { width:256px; div { position:relative; } #main { width:256px; height:256px; } #overlay { position:absolute; height:100px; width:100px; top:0; left:0; }

The code:

 $(document).ready(function() { $("#main").mouseenter(function() { $("#overlay").show(); }); $("#main").mouseleave(function() { $("#overlay").hide(); }); });

See a working example here: http://jsfiddle.net/jsney/10/

JQuery image overlay?

More articles: