Circle Navigation Effect with CSS3
Today we want to show you how to create a beautiful hover effect for an image navigation using CSS3. The idea is to expand a circular navigation with an arrow and make a bubble with a thumbnail appear. In our example we will be showing the thumbnail of the next and previous slider image on hovering the arrows. View demo Download source The beautiful images are by Andrey & Lili and they are licensed under the CC BY-NC 3.0 License. The Markup For this little CSS3 effect we will have a navigation structure that looks like the following: <div class="cn-nav"><a href="#" class="cn-nav-prev"><span>Previous</span><div style="background-image:url(.. In our demo we will make a jQuery template out of this and dynamically add the thumbnails for the previous and next images of the slider. The CSS Let’s see now, how to add the style for this navigation. The span element, which will contain the arrows as a background image will have an initial height and width of 46 pixel. And that’s it!