With CSS3 animation properties you can create some awesome hover effects without too much effort. So here are some cool CSS3 Image Hover Effect tutorials.
How to create a flip effect with CSS3 transforms
Styling and layout are now entirely in our hands, although the best thing about CSS3 in my eyes are the Transforms, particularly the 3D ones.
Hover-friendly Hexagons
The design involved being able to hover over the images to reveal a description. While building out the site I ran into an interesting problem – how does one build hover-friendly hexagons? To see a sample of what I’m talking about, check out this CodePen.
Hover Effects with CSS3
The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.
3D Thumbnail Hover Effects
Today we want to show you how to create some exciting 3D hover effects using CSS3 and jQuery. This idea is inspired by the cool hover effect that you can find on the page of the Google SketchUp Showcase.
Pure CSS 3D Meninas
A lot of people is asking me how my Pure CSS 3D Meninas effect works and how I did it. In this post I will try to fully explain it, from the image edition part to the html/css coding part. Even if this is going to look like a tutorial, please, don’t take it as a tutorial; this effect is just an experiment and not thought to be useful or a good practice in web design.
Caption Hover Effects
Today we want to show you how to create some simple, yet stylish hover effects for image captions. The idea is to have a grid of figures and apply a hover effect to the items which will reveal a caption with the title, author and a link button. For some of the effects we will use 3D transforms. The aim is to keep the effects subtle and provide inspiration for many different variations.
CSS3 Tilt-Shift Text
Pizza Time Hovers
We agreed that 1) those are some pretty neat hovers! and 2) it’s pretty cool that there is a quality website at all at a domain like PizzaTime.com – in which that she typed in randomly hoping there would be.
Multi-direction hover
Transition effect with CSS
CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.
