Jump to content

Search the Community

Showing results for tags 'picture overlay jquery'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Welcome to PHP Freaks
    • Announcements
    • Introductions
  • PHP Coding
    • PHP Coding Help
    • Regex Help
    • Third Party Scripts
    • FAQ/Code Snippet Repository
  • SQL / Database
    • MySQL Help
    • PostgreSQL
    • Microsoft SQL - MSSQL
    • Other RDBMS and SQL dialects
  • Client Side
    • HTML Help
    • CSS Help
    • Javascript Help
    • Other
  • Applications and Frameworks
    • Applications
    • Frameworks
    • Other Libraries
  • Web Server Administration
    • PHP Installation and Configuration
    • Linux
    • Apache HTTP Server
    • Microsoft IIS
    • Other Web Server Software
  • Other
    • Application Design
    • Other Programming Languages
    • Editor Help (PhpStorm, VS Code, etc)
    • Website Critique
    • Beta Test Your Stuff!
  • Freelance, Contracts, Employment, etc.
    • Services Offered
    • Job Offerings
  • General Discussion
    • PHPFreaks.com Website Feedback
    • Miscellaneous

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Age


Donation Link

Found 1 result

  1. 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
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.