Question

Does anybody know how the eyeball in this website is designed? Is this javascript (jQuery perhaps), or simply HTML5 and CSS? I just don’t really understand how you get a little image in that shape, get it’s onhover method, set a new picture, and then make it clickable. Is this a button?

http://animalvfx.com/work/

Answer 1

They use one image as the background (found here: http://animalvfx.com/images/bg-open-close.png).

They are only using CSS, they have a hover state on the class that sets the background position to a negative offset.

Basically the styles are:

.slide-holder .opener {
   width: 30px;
   height: 38px;
   overflow: hidden;
   position: absolute;
   bottom: -38px;
   background: url(../images/bg-open-close.png) no-repeat;
}

.opener:hover {
   background-position: 0 -76px;
}

Effectively you are only seeing one part of the background image at a time. Because the image states are similar, it appears to be looking up.

The click event of the eye is using jQuery slidedown

If you want to find out how things work yourself, you can use the developer console in most popular web browsers. Then use the HTML inspector tool to inspect the element you are interested in.
Developers consoles are usually activated by pressing F12. This works in any decent modern web browser (and Firefox with Firebug)