Search the Community

Hi, I'm trying to make a picture gallery website for my friend and the way that I wanted it work is so when you hover over a picture it shows a overlay that displays the title of the picture and some information about it. I'm currently having some issues with the jQuery as I want it so when you hover over a certain picture it only displays that overlay but atm it displays all of them which isn't how I want it to work, I would only like the certain picture that you hover over to show the overlay. Thank you. Here's the HTML code: <div id="photo-container"> <ul id="photo-col-1" style="float: left; width: 457px"> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt1.jpg" alt="photo1" id="post-1"></div> <div class="photo-overlay"><h2>Frog</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt2.jpg" alt="photo2" id="post-2"></div> <div class="photo-overlay"><h2>Fast Traffic</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt3.jpg" alt="photo3" id="post-3"></div> <div class="photo-overlay"><h2>Leaf</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt4.jpg" alt="photo4" id="post-4"></div> <div class="photo-overlay"><h2>Sky</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> </ul> <ul id="photo-col-2" style="float: left; width: 457px"> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt5.jpg" alt="photo5" id="post-5"></div> <div class="photo-overlay"><h2>Landscape</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt6.jpg" alt="photo6" id="post-6"></div> <div class="photo-overlay"><h2>Sun</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt7.jpg" alt="photo7" id="post-7"></div> <div class="photo-overlay"><h2>Stream</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> <li class="photo-col"> <div class="preview"><img src="images/gallery/pt8.jpg" alt="photo8" id="post-8"></div> <div class="photo-overlay"><h2>Tree</h2><div class="photo-details"><p>Information about the photo goes here.</p></div></div> </li> </ul> </div> Here's the jQuery: <script type="text/javascript"> <!--PhotoPopOut Script by Luke Harvey--> $(document).ready( function() { $('#post-1').mouseover( function() { loadloginPopup(); }); $('#post-1').mouseout( function() { unloadloginPopup(); }); function loadloginPopup() { $(".photo-overlay").css({ "display": "block" }); $(".preview img").css({ "opacity": "0.6" }); function unloadloginPopup() { $(".photo-overlay").css({ "display": "none" }); $(".preview img").css({ "opacity": "1" }); } } }); </script> Here's what it looks like when you hover over the pictures: Please excuse anything that might seem 'dumb', I've just returned back to web development and I've forgotten a lot of things