22个很酷的CSS鼠标悬停效果教程
Ideas for Subtle Hover Effects
Some creative and subtle hover effect inspiration using modern CSS techniques including 3D translate and pseudo elements.
Shape Hover Effect with SVG
In this tutorial we’ll recreate the hover effect as seen on The Christmas Experiments website. We’ll be using SVG for the shape and Snap.svg for animating it on hover.
Diagonal Sliding Hover Transition
In this CSS hover tutorial you will learn to create a hover transition that could be used for image links.
Caption Hover Effects
In this tutorial you will learn to create some subtle and modern caption hover effects.
CSS Powered Buttons with Hover Tooltips
CSS Hover Effects with Websymbols Tutorial
In this tutorial we are going to show you new CSS hover effects using CSS transition properties with websymbols. It looks so much more interesting with creative design using circles transition style.
Simple Icon Hover Effect
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Create a Pentagon Hover Effect with CSS3 and jQuery
This is a new series that will focus on cool web elements on the web. The goal of this tutorial is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way.
Circle Hover Effects with CSS Transitions
A useful tutorial to create different interesting hover effects on circles with CSS transitions and 3D rotations.
Direction-Aware Hover Effect with CSS3 and jQuery
Creating a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
How to Create a Fast Hover Slideshow with CSS3
A little fast-running image slideshow that plays on hover and pauses when mousing out. The current image will stay visible.
3D Thumbnail Hover Effects
A tutorial about how to create 3D thumbnail hover effects with CSS 3D transforms and jQuery.
Beautiful Image Hover Effects with jQuery and CSS3
In this tutorial, we are going to show you how to create a beautiful image gallery with hover effect by using jquery and CSS3.
CSS3 Hover Effect
In this tutorial I will show you other five examples of hover effects using different CSS properties.
Sexy Image Hover Effects using CSS3
In this you will learn How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it.
CSS3 Image Hover Effect
In this tutorial I will tell you how to create different CSS hover effects.
Filter Functionality with CSS3
In this tutorial you will be exploring CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.
Original Hover Effects with CSS3
In this tutorial you will learn how 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.
Thumbnail Proximity Effect with jQuery and CSS3
Learn how to create a neat thumbnail proximity effect with jQuery and CSS3. The idea is to scale thumbnails when hovering over them and also scale their neighboring thumbnails proportionally to their distance.
Neat Photo Hover Effect with CSS Sprites and jQuery
Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects.
Pretty Hover Effects with CSS and jQuery
This tutorial will show you how to create pretty hover effects for your images using jQuery and CSS. This can come useful especially if you already have hundreds of images that you want to apply this effect on.