Code pre­view hover ef­fects

Web Designer - - Contents - In­spired by epoch476.com

Learn how to recre­ate the im­pres­sive hover ef­fect seen on epoch476.com

Site ti­tle

The main site ti­tle and logo show the au­thor’s name of the port­fo­lio and act as a ‘home’ but­ton for the site.

Shift­ing ti­tles

As the user rolls over the head­ings the text shifts to the left, be­comes larger and changes to an out­line of the text.

Work head­ings

The work head­ings are the main links on the page, th­ese links are what the text looks like when the mouse is not over the ti­tle.

Main menu

The menu al­lows ac­cess to the rest of the site with an­other shift­ing rollover ef­fect that is equally as im­pres­sive as the main site con­tent.

Shift­ing cursor

The cursor is a round white dot, but when the user moves over the main head­ings, it be­comes much larger with a pre­view of the image show­ing it­self in­side.

56

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.