Div Rollover effect

JavaScript
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…

2

It’s done with jQuery, so I’ll move this to the JavaScript forum. :slight_smile:

3

Thanks.

4

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

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.

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.

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. :slight_smile: )

8

I was able to do something similar with javascript. It slides instead of fades but is exactly what I needed to do.