jQuery Popout Hover using CSS

  • jQuery Popout Hover using CSS, 5.0 out of 5 based on 1 rating popout using css and jqueryI recently saw a hover over trick that caught my eye and I thought it was a pretty clever way of showing more details on an element. I decided to give it a try and the solution was quite simple.

    HTML

    The columns are made up of unordered list items, within each list item is the thumbnail image and the details of the item wrapped in a class of “info”.

    CSS

    Start by styling the list items. Notice we add position: relative; to the list item, and on hover we raise the z-index to 99 so it lifts over the other elements.
    We add a position: relative; to the image as well, so we can control the z-index value on hover. What we want to do here is to lower the opacity of the image by default to 30% then on hover, turn up the opacity to 100% and lift the image by increasing the z-index value to 999. This will allow the thumbnail to sit on top of the .info elements.
    Use absolute positioning to shift the .info class -10px to the left and -10px to the top. Since .info is using an absolute positioning, we must have enough top padding so the content within does not overlap the thumbnail. To do this, the top padding is measured by adding 10px to the height of the thumbnail (200px in my demo). Some CSS3 was added for the rounded corners. We will hide .info by default, and show it on hover.

    Final Thoughts

    Go ahead and experiment with this technique! If you have any questions or concerns please don’t hesitate to let me know. For those concerned with this technique working on IE6, you can use some jQuery tricks to get around the hover issue.





          

    Author: Soh Tanaka

    Subscribe to Site Help Web Resources Feed

    Related Posts:

    GD Star Rating
    loading…

    August 9th, 2010 | Blue | 4 Comments | Tags: , ,

About The Author

Steve

Hi I am a webdeveloper based in Brisbane, Australia. Fanatical about the internet and website code and development. Hence this site, a showcase resource site for you to get the latest greatest code , scripts , apps and demos all from the one venue.

4 Responses and Counting...

Leave a Reply

* Name, Email, and Comment are Required