10 Easy Image Hover Effects You Can Copy and Paste Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code. Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action. Sneak Peek Before we get started, take a look at the demo below to see all of the various hover effects that we’ll be building. Demo: Click here to launch. Setup Before we begin creating the individual demos, some basic setup is required. Most of this is basic stuff: box-sizing allows us to manipulate the box model (feel free to apply more specifically if you don’t like the universal selector), and the pic class gives us a place to toss in some generic styling for each photo. Zoom and Pan Our first group of effects involves utilizing some tricks with hidden overflow. Grow Shrink Side Pan Vertical Pan Fun with Transforms Tilt Morph
Slopy Elements with CSS3 It's always a delight to see some non-straight elements in web design. Angled shapes and diagonal lines can create an interesting visual flow and add some unexpected excitement. Inspired by many superb designs that use non-straight elements, I want to show you some simple examples and ways how to create slopy, skewed elements with CSS only. View demo Download source It’s always a delight to see some non-straight elements in web design. So, let’s begin! Example 1 In our first example, we want to have a pretty normal layout with a little twist: we want a diagonal separation between the elements. The Markup Let’s create a section for our whole content and inside we’ll add some divisions with the class se-slope. Now, let’s check our the style. The CSS The body will have the same background color like all the even se-slope elements, which is pink. The divisions will all be rotated: the odd ones will be black and rotated 5 degrees and the even ones will be pink and rotated -5 degrees. Example 2
Creating Custom Form Checkboxes and Radio Buttons with Just CSS! In CSS we have many ways to style things in any way we want. When it gets to forms though, things get a little complicated. Text inputs are easy, but checkboxes and radio buttons are very difficult to style with CSS. In this tutorial I’ll show you exactly how to style these inputs and make awesome forms with just CSS! Effectively, a really good idea for styling checkboxes the only way to style checkboxes, radio buttons and drop downs is with this little piece of CSS: appearance: none; This will take all browser styles off those inputs and we can start to alter them as regular elements. It’s okay though! What we can use So what weapons can we use to create these effects? Recently there has been a bit of discussion on the web about :before and :after when using forms. To get started, lets make a few checkboxes and radio buttons. The next step is some CSS. After that we set the styles for when the user clicks on the checkbox (:active) and when the checkbox is checked. And we’re done! Update!
Pretty Hover Effects Pretty Hover Effects with CSS and jQuery Demo: Hover your cursor in each image below. Note that if you're using IE - you're not seeing the rest of the styles due to lack of CSS3 property support. Autumn Leaves Cloudy Skies Nice Horsy Grassy Meadows Jigsaw Pieces Retro GrooveBack to Tutorial Filter Functionality with CSS3 Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type. View demo Download source The idea is inspired by Roman Komarov’s brilliant “Filtering elements without JS” experiment where he uses checkboxes and radio buttons for filtering colored shapes. The beautiful Dribbble shots used in the demos are by Mike from Creative Mints. The Markup Let’s start with the markup. The unordered list will contain all the portfolio items as anchors with an image and a span. The CSS We’ll be going through three example effects, but first, let’s take a look at the common style. I will omit all the vendor prefixes, but you will, of course, find them in the files. The main section container will have a specific width: Let’s move on to the item list: Example 1 Example 2
3d animation using pure CSS3 Here's an example of pretty powerful CSS3 animation and 3d effects. Using the perspective, transform and transition properties, we can create a 3d animation effect. Simply hover over the movie posters below to see the effect in it's full glory. Just make sure you're running the latest version of a -webkit based browser (Apple Safari or Google Chrome) to see the effect. Iron Man 2With the world now aware of his dual life as the armored superhero Iron Man, billionaire inventor Tony...More info The Last AirbenderThe story follows the adventures of Aang, a young successor to a long line of Avatars, who must put his...More info Tron LegacySam Flynn, the tech-savvy 27-year-old son of Kevin Flynn, looks into his father's disappearance and finds...More info
Awesome Overlays with CSS3's Border-Image Property - ZURB Playground - ZURB.com What's the big deal? These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors. The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS. How to use border-image The border-image property is tricky in the way it takes a single image and turns it into a complete object border for any sized element. What can potentially screw things up is that it takes the center section and stretches it across your entire object. This is a sketch of how the browser cuts up your image into the border-image elements... ...and this is the image we're using (enlarged), and how each piece becomes an edge to our overlay object. The rest of the syntax The first part of the syntax is simply the path to the image you'll be using. url(/images/awesome-overlays/border-image.png) 5 5 5 5 stretch;
Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. Personal/Open Source For personal/open source use, Hover.css is made available under a MIT license: Use in unlimited personal applications Your application can't be sold Your modifications remain open-source Free updates Read full license Commercial For commercial use, Hover.css is made available under Commercial, Extended Commercial, and OEM Commercial licenses. Commercial License Purchase | Read full license Extended Commercial License
43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own) jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room. However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. The Problem with jQuery Image Sliders jQuery sliders can be great for certain types of websites, but disastrous for others if you want it to rank in Google. There has also been a lot of discussion about how image sliders can actually lower conversion rates for B2B sites. So why do we keep using them? Elements of a Brilliant jQuery Image Slider Highly Flexible and Customizable. 1. 2. 3. 4. 6.
Text Blocks Over Image Someone recently asked me about this technique and my first reaction was that it was probably a little too mundane to cover as a tutorial. But then I got to thinking that there is actually a few interesting things happening here and the style is trendy enough people might be interested. The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text. View Demo The Schematics The HTML <div class="image"><img src="images/3754004820_91a5c238a0.jpg" alt="" /><h2>A Movie in the Park:<br />Kung Fu Panda</h2></div> Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. The CSS This is going to put our text right up on top of the image nicely, but it doesn't accomplish the transparent black box we want to achieve behind the text. Let's wrap the inside h2 of the in a span: Problem Share On
Auto-Hide Sticky Header Auto-hide sticky header is a shot that shoots down two rabbits: makes site navigation easily accessible anywhere on the page and saves content space at the same. My client, Easy Shine, was happy to have this type of header for their website. I've also implemented this technique here, on my website (you can see it when the width of your viewport is below 768 px). Making header sticky A little bit of obvious HTML/CSS coding here, which makes the header stick to the top of the page, independently of the page scroll position. Auto-hiding header Auto-hide means hiding the header automatically when a user starts scrolling down the page and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up. Reactive It is when the header directly and instantly reacts to the page scroll. The JS algorithm changes the value of CSS property top when page scroll is performed: Lazy In CSS we define what the class name means: An extra state for header Examples Demo