I'm looking to overlay an image in the right hand corner on another image using jquery.
Basically I want the 2nd image to appear over the other image in the right hand corner when the user's mouse hovers above the image and then vanish when they stop hovering over it. How would I achieve this with Jquery?
@Senad is quite right, you don't need jQuery for that. However, if you have a more complicated situation and are looking for similar functionality, try:
Wrap them in a containing element. Set the containing element to position:relative Set the overlay image to position:absolute; top:0; left:0; and style the height and width as you like...then use jQuery to handle the hover 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; } Code:
$(document).ready(function() { $("#main").mouseenter(function() { $("#overlay").show(); }); $("#main").mouseleave(function() { $("#overlay").hide(); }); }); See a working example here: http://jsfiddle.net/jsney/10/
You don't need jQuery for that, you can use CSS for that, 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; } This is much easier solution and acceptable for everyone.
Let's assume your first image is wrapped inside a div.
1/ Add another div with a "display:none" style and a class of your choice 2/ On hover load the img (if it hasn't been done before) on the div 3/ slideToggle the div that contain the second image and voila !
$('div .firstImage').hover(function(){ $('.secondImage').slideToggle(); }); Of course, you need to set the proper positioning style to the div containing the second image.
Here's a simple way I did it following thomas's code above. In my case I wanted to put an overlay (basically a greyed out box with a big plus sign) on an image that shows it's clickable and will enlarge the thumbnail in a lightbox. I need to do that alot so am using classes not ID's.
My image and overlay image are the same dimensions. .hide just hides the overlay until the hover function show's it.
I'm not showing the lightbox stuff so it's clearer for this issue.
Notice that a.hoverTrigger wraps the .overlay img as well. If you don't do that you will get the dreaded 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(); }); We also can achieve this using "jquery.ImageOverlay.js" plugin.
here is 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> 'Ships' 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 : Visit this link to download .js files and images files and live example of implementation in many ways.
http://jayeshsorathia.blogspot.com/2012/12/image-overlay-using-jquery-plugin-with-asp-net.html