SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Div Rollover effect

    Trying to understand how Awwwards does their rollover effect with the sites of the day.

    http://www.awwwards.com/

    When you hover over the thumbnails in the middle section you get information like the date it was submitted, the score it got, and a button to click on to view the site. Trying to replicate something like that but not sure where to start...
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    It's done with jQuery, so I'll move this to the JavaScript forum.

  3. #3
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    It's done with jQuery, so I'll move this to the JavaScript forum.
    Thanks.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  4. #4
    Non-Member Max Height's Avatar
    Join Date
    Dec 2011
    Posts
    303
    Mentioned
    6 Post(s)
    Tagged
    1 Thread(s)
    You can do all that with simple vanilla javascript. You don't need jquery at all unless you specifically want to use it. And if the overlays are just images then you don't need jquery (which is just javascript anyway) or javascript at all and you can do it with just html and css.

  5. #5
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No the overlays are text/css. I actully found a little tutorial and have it down for the most part. I will post back if I need any help, thanks.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health

  6. #6
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    The effect is produced using HTML and CSS.
    - The top <div class="screenshot"> contains the image. On mouseover its opacity is reduced from 1 to 0.2.
    - The next <div class="website"> contains a link to the target website. This changes from display none to block on mouseover of the top image.
    - The next <div class="info"> changes from display none to block on mouseover of the image.
    - <div class="info"> contains <div class="detail"> which in turn contains <div class="data">
    - <div class="data"> contains <span> elements for day, month year, also "Website of the day and two numbers int and dec.

    All of the divs below the image appear when the image opacity is reduced on mouseover.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,333
    Mentioned
    463 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by AllanP View Post
    The effect is produced using HTML and CSS.
    You could certainly do that with CSS3 alone, but in this case, there's a bit of jQuery assistance. I can't quite see which script is doing it, though. (Too lazy to look through all that bloated code, I'm afraid. )

  8. #8
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    You could certainly do that with CSS3 alone, but in this case, there's a bit of jQuery assistance. I can't quite see which script is doing it, though. (Too lazy to look through all that bloated code, I'm afraid. )
    I was able to do something similar with javascript. It slides instead of fades but is exactly what I needed to do.
    Personal Portfolio - Zeeb44
    IT Manager for - Family Dental Health


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •