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. The effect is done with CSS3 transitions.
DEMO DOWNLOAD
DEMO DOWNLOAD
For this little CSS3 effect we will have a navigation structure that looks like the following:
01 | <div class="cn-nav"> |
02 | <a href="#" class="cn-nav-prev"> |
03 | <span>Previous</span> |
04 | <div style="background-image:url(../images/thumbs/1.jpg);"></div> |
05 | </a> |
06 | <a href="#" class="cn-nav-next"> |
07 | <span>Next</span> |
08 | <div style="background-image:url(../images/thumbs/3.jpg);"></div> |
09 | </a> |
10 | </div> |
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. But to show you how the expanding circle effect is done, we will only show you this part.
READ MORE