zeeb44 — 2012-01-02T22:19:37-05:00 — #1
Trying to understand how Awwwards does their rollover effect with the sites of the day.
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...
ralphm — 2012-01-02T22:42:13-05:00 — #2
zeeb44 — 2012-01-02T22:45:19-05:00 — #3
system — 2012-01-02T23:37:13-05:00 — #4
zeeb44 — 2012-01-02T23:38:58-05:00 — #5
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.
allanp — 2012-01-03T01:05:05-05:00 — #6
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.
ralphm — 2012-01-03T02:47:05-05:00 — #7
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. )
zeeb44 — 2012-01-03T12:03:47-05:00 — #8