Circle Navigation Effect with CSS3 - Serif WebPlus Tutorials - Addons, Plugins, Tutorials and Resources

Premium Templates

WebPlus Templates

Image Galleries

PrettyPhoto

Hover Zoom New

Image Effects

Nivo Slider

Circle Navigation New

Video Players

Audio Player

Other Effects

Website crafted using the Serif Software Suite

If you’ve found these tutorials useful please help the world's poorest communities by making a small donation to WaterAid - Even if it’s just a one-off gift of £2 it would be massively appreciated.

Circle Navigation Effect with CSS3

Create a beautiful hover effect for an image navigation using CSS3. The original tutorial comes from Codrops.

The effect is done with CSS3 transitions and only visible in modern browsers - IE9 is not included ;)

Demo images are by Andrey & Lili.

View the demo to see it in action!

1. Download the zipped file - Includes the JavaScript files, CSS, images and a single paged WebPlus file in X4 and X5 file format so you can see how the code is incorporated in to a WebPlus website.

2. Using an ftp program such as FileZilla add the complete ‘circle’ file to the root of your server, this contains everything needed for the Image gallery to work.

Alternatively, click on Tools in the WebPlus workspace > Site Manager > File Manager > and replicate the file tree in the image below by creating new folders and adding files to the correlating folders.

4. Finally you will need to add the following HTML code to the body of the page.

Copy to clipboard > Insert > Web Object > HTML > Paste to Body

Placement of the Image gallery will depend on the placement of the HTML Code Fragment.

3. Include the following script in the head of the master page or the page you wish to display the Image gallery.

Copy to clipboard > Insert > Web Object > HTML > Paste to Head.

If you’ve embedded the files via the File Manager you can now preview the site in your browser to see an active image gallery, if you’ve uploaded the files via an ftp client you’ll need to upload the site to see it in action!

Adding your own images

You’ll need to resize your large images to 820 X 410, if you name them 1jpg, 2.jpg etc it will save you having to change the HTML added to the page. Then add them to the ‘large’ file.

Thumbnails require sizing to 120 X 120 and adding to the ‘thumbs’ folder.

Any issues or questions please post in the Support Forum.

Attention: If you’re using WebPlus X4 you will need to use this workaround to allow this add-on to display correctly in Internet Explorer (even then it won’t show the animated hover effect)