background preloader

Circle Navigation Effect with CSS3

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!

Sliding Image Panels with CSS3 Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We'll use radio buttons with labels and target the respective panels with the general sibling selector. View demo Download source Today we’ll show you how to create some neat sliding image panels with CSS only. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License. You might as well be interested in Filter Functionality with CSS3 where we have used a similar technique for filtering elements based on their type. Please note: the result of this tutorial will only work as intended in browsers that support CSS transitions and animations. The Markup The HTML will consist of three major parts: the radio buttons and the labels, the container with the panels and their “slices” for each image, and the titles. Let’s style this baby. The CSS Demos

Demo | jQuery.popeye 2.1 | an inline lightbox alternative with slideshow x Note: To see the full potential of CSS3 styling (shadows, gradients, rounded corners, alpha transparency), please view this page in a modern webkit or mozilla browser (Firefox 3.5+, Safari 4, Opera 10.50, Chrome 4). Other browsers will degrade gracefully. Example 1 The first popeye-box uses the standard options: it floats to the left and opens to the right, its navigation and caption show on mouseover. By placing the navigation inside the stage area (where the image is displayed), we can get it to hover above the image. No need to read this, just dummy text ;-) Vivamus ut nisi id libero interdum pretium. View HTML code used in this example Example 2 The second popeye-box has the following user-defined options: direction: 'left' - open to the left. caption: false - do not display captions (even though the images have alt tags with text). navigation: 'permanent' - the navigation is always visible. The navigation stays fixed to the right of the image. View HTML code used in this example Donate

Spectacular image galleries made simple. SIDEWAYS – jQuery fullscreen image gallery Last updated on Nov 20, 2010 Originally published on September 12, 2010 by malihu, under Templates & web apps. A simple, yet elegant fullscreen image gallery created with the jQuery library and CSS. The gallery features fullscreen images in various modes and custom scrollbars. SIDEWAYS image gallery is made by implementation of some previous scripts and tutorials posted on this blog and some (minor) CSS3. I’ve included the complete gallery code on page 2 of this post. Changelog▾ This work is released under the MIT License. Donating helps greatly in developing and updating free software and running this blog

85 Awesome jQuery Slider Plugins Slider are very useful and increasingly popular web page elements used for highlighting important content. By using a jQuery slider plugin, one can create amazing HTML slider effects with fancy animations of content elements like text and images. jQuery takes care of the difficult aspects like browser support and typically when using jQuery plugins it can be done with very little coding effort. This is the reason why jQuery sliders and jQuery banner slideshow scripts have become very popular on most types of websites. They are are typically used to feature multiple products, news, video etc. without taking up a lot of space on the pages. In fact, we see sliders on most news and business websites today and they are placed on the most important location over the fold on the front page. The jQuery library has undoubtedly made the life of web developers easier and made it possible for non-experts to do fancy stuff themselves. Advertisement Article Index Camera Slider – MORE INFO

Related: