Hover effects for images using pure CSS3. CSS hover effects - for images, buttons, when hovering over links, blocks, etc.
Applying various CSS hover effects when hovering over an image, link, or text is one of the most common CSS techniques.
In this article I have collected a lot interesting effects CSS3 that appear on mouseover. You can easily apply them on your website or other web projects. Let's see what I have prepared for you.
1. 10 Stylish Hover Effects
As the name suggests, this is a collection of 10 incredibly stylish hover effects.
Source
2. Direction-aware Hover Effect
When you hover your mouse over various elements, CSS hover effect on hover follows the cursor and creates amazing 3D presentations.
Source
3. Wacom Hover Effect
This is already a rather hackneyed effect, but many people still enjoy using it. The presentation is simple but attractive.
Source
4. CSS3 Hover Effects
If you're looking for circular hover effects, you'll find some interesting ones here. IN total There are 12 different CSS hover frame effects available.
Source
5. Hover Animation from UNIQLO
This is another interesting hover effect. It's ideal for thumbnails or other types of images.
Source
6. Button Hover Effects
Here are some impressive hover effects for buttons. All of them are perfect for sites of any type.
Source
7. 10 Stunning Hover Effects
Another set of 10 CSS hover effects for buttons. Most of them are quite impressive.
Source
8. CSS3 Hover Effects 2
This is a collection of four different image hover effects. The effect's name and description are displayed along with it.
Source
9. Bounce on Hover
This is a fun and interesting hover effect for images. Round frame Ideal for applying to team member avatars and recommendation images.
Source
10. 8-bit Hovers
This stylish vintage hover CSS effect will give you a feeling of nostalgia. You can use it to create retro style for site.
Source
11. Simple Title Hover Effect
When you hover over an image, this effect displays titles against a low-opacity background.
Source
12. Flip Down Effect
This is another simple one, but very beautiful CSS hover effect when hovering. When you hover your mouse over an image, it displays the title and description using a smart swipe effect.
Source
13. Curiosity Award
Until you hover your mouse over the image, you won't understand the beauty of this effect. Random lines are beautifully turned into a logo and then it is painted with colors.
Source
14. Image Hover Effect
This is an incredible CSS hover effect for image frames. The way one image appears against another is incredible!
Source
15.Hover Animation
When you hover over the image, the opacity decreases, focusing on the link.
Source
16. Hover Me Brother
This may not be a very useful CSS hover effect, but it is fun. Just hover your mouse over the sunglasses and the magic will begin.
Source
17. Nautilus SCSS HAML Hover Effects
This is a creative hover effect available in several variations. They offer unique opportunities for designing images.
Source
18. SVG Border Hover Effect 1
Suitable for text, buttons or images. The gradual re-creation of the frame is a really interesting effect.
Source
19. Hover Search Map Icon
Do you need a CSS hover effect on hover for your search bar or map icon? This is exactly him. Its seamless transformations are a treat for the eyes.
Source
20. Social Icon Pane
This hover effect can be applied to hide icons at the beginning social media, and then display them when the user hovers over them with the mouse.
Source
21. Product Item Additions Info
This is a great way to provide additional information about products in the online store. When you hover over a product image, information about it is displayed with a beautiful effect.
Source
22. Animated Envelope
Perfect CSS hover effect on hover for the "section" Connect with us". It displays contact information in a pop-up envelope, but only after the user hovers over the image.
Source
23. Back to Top
This unique hover effect for the Back to Top button allows you to provide your visitors with a beautiful, animated pointer.
Source
24. Fancy Hover
When you hover your mouse over an image, it not only enlarges, but also changes the way it is displayed.
Source
25. Reminders Icon Hover Effect
This CSS hover effect adds beautiful styles to the image.
Source
26. Circle Image Hover
Hover effect for circular images. There are four different styles of hover effects in the collection.
Source
27. Safari Icon Hover Effect
This CSS hover effect recreates the Safari icon animation on hover. You can replace the icon own image or logo.
Smooth transition from monochrome to color on hover using jQuery.
3. Hover effect using CSS and jQuery
The effect of replacing photos when hovering the mouse cursor. Photos are presented in the form of sprites (several photos combined into one).
4. Animated hover effect
jQuery effect: the element is dimmed until the mouse cursor is hovered over it. A great way to focus the visitor’s attention on some element on the page.
5. Change image on mouse hover using jQuery
A very interesting effect. When you hover the mouse cursor, the images change. When you click the mouse, all images will change simultaneously.
6. CSS animated hover effect
Change images on hover. The effect does not support IE.
7. Hover Effect Using CSS Sprites and jQuery
The effect of darkening an image when hovering the mouse cursor over it. CSS sprites are used to implement the effect.
8. jQuery plugin “jQueryZoom”
With this plugin you can add an image zoom effect on hover or add an overlay to it. The plugin is easy to customize to suit your needs.
9. Change images on hover
Change images when you hover the mouse cursor. You can easily find use for this jQuery plugin in online stores and catalogs.
10. jQuery hover effect
When you hover your mouse over an object, you can change the colors of a specific part of the page.
11. jQuery plugin “Hover Image Zoom”
Enlarges the image when hovering the cursor. Proximity effect.
12. jQuery hover animation
Can be used to implement navigation. An animation effect in two versions: with a cast shadow and with reflection.
13. jQuery hover effect “Images Hover Cycle effect”
Very often on websites you might come across changes or buttons on hover. A special pseudo-class:hover in CSS allows you to implement the task. Today we’ll look at some techniques that allow us to make this trick, and below we’ll publish a list of the most interesting of them (with brief descriptions/explanations). We will divide all options into:
These groups are very arbitrary, because many examples overlap and are universal, that is, they can be found when designing different objects.
Hover effect CSS styles is added to the right of the element like this:
| a: hover ( color : red ; ) |
a:hover ( color: red; )
Most often, the mechanism is used specifically for links in order to change their color or add/remove underlining. However, it can also be specified for other blocks, buttons, texts, or used when creating.
| button : hover ( background : rgba (0 , 0 , 0 , 0 ) ; color : red ; .my-picture : hover ( opacity : 0.5 ; filter : alpha(opacity= 50 ) ; ) |
button:hover ( background: rgba(0,0,0,0); color: red; ) .my-picture:hover ( opacity: 0.5; filter: alpha(opacity=50); )
Modern browsers equally correctly perceive the CSS hover effect on hover, although in older versions of IE 6 and below it only works for links. Plus, some sources said that this must be specified in the code.
By the way, when setting link styles, selectors can also be additionally used: link - for pages that have not yet been visited, :visited - for those where you have already been + :active determines the currently active address. It's important to place the hover effect in the CSS after :link and :visited if they exist.
Let's move from theory to practice. Below is a list useful materials and snippets - follow the links to view the sources.
Hover effects for buttons and links
As we said above, this is the most popular category of objects on the site where this technique is found. Here are some options on the topic.
Simple examples for buttons
Sullivan Buttons
The trick is that when you hover over different buttons In addition to changing the background color, a small animation with icons (each with its own) is also launched.
CSS Icons on Hover
Selection of 5 simple options implementation of the task. In all cases, additional icons are used that appear to the right/left of the text or replace it.
Button Hover Effects
Compared to the previous example, these 12 trigger functions look much more interesting: both visually and in terms of code. Not without JS.
Nav Hovers
Several tricks that allow you to make something more unusual than with basic property text-decoration. The button background is additionally filled with various visual effects.
Info on Hover
Tooltips functionality is currently supported in all browsers, but you can customize it to suit your needs. In the current example, the pseudo-class is triggered for the dfn tag, which looks stylish. The code is quite compact HTML + CSS.
Mana Button
One of the most original options hover effect in blocks - when hovering, it is like filling it with liquid. The implementation uses CSS, HTML and SVG. For certain website topics, this snippet will definitely be a godsend.
Hover effects for images
15 basic techniques
Despite the fact that the article was published quite a long time ago, the methods still work correctly. Here, probably, all possible standard transformations for graphics are collected: several types of zoom, rotation, blur, b/w, transparency, filters, shine, etc. Very useful material.
Beautiful hover effects images
A selection of 30 pleasant and smooth actions when hovering over a picture. Due to simple visual manipulations in the form of zoom and adding lines, a good complex impression is created. In some places the title is enlarged and the short description is tightened. Great option for a portfolio.
Barberpole Hover Animation
The animation is not complicated at first glance, but in the end it looks very cool and unusual.
CSS hover effects with direction detection
An excellent selection of snippets and codes on the topic can be found in the article from css-tricks.com. All these examples are united by the fact that during operation the location and direction of cursor movement is determined. This, in turn, allows you to create quite original reactions when hovering over page elements:
In many difficult Javascript solutions and jQuery for hover effects allow you to significantly diversify and improve the result.
Direction Aware Hover Goodness
Direction Aware Tiles using clip-path Pure CSS
Find the rest of the tricks in the original article.
Animatism
This development includes more than 100 simple ways“animation” of images or objects when hovered. With these functions you can implement different appearance buttons, headings, texts, social icons, etc. There are options with changing the display of pictures and translucent background overlays.
The link contains 7 CSS3 hover header effects - when hovering over an image, the user will see information block with title, brief description and a link to follow. This is not to say that the examples are very original, but they will definitely help diversify a static content project.
CSS Hover libraries
Hover.css
The project, simply named Hover.css, contains a collection of CSS3 effects for links, buttons, blocks, etc. You can use ready-made code and/or add your own modifications to it. There is a lot of interesting stuff here: 2D/3D transformations, working with backgrounds and frames, shadows, icons. The solution is available in CSS, LESS and Sass formats.
Imagehover.css
Another library that sets hover effects pictures - in free version you will find 44 transformation options (the premium set contains 5 times more). LESS and SCSS are also supported here, this file weighs only 19kb. The site has a page demonstrating all working examples. There is a lot on offer unique chips, which were not mentioned above.
There are more than 30 in the project different techniques for round and square objects. All of them are quite original; there are practically no simple “single-element” actions in the form of a regular zoom/fly out. The task was implemented using pure CSS3 + HTML (plus Scss files included). Excellent compatibility with Bootstrap 3, documentation available.
Total. We hope these css hover effects when hovering over images, blocks, links and other page elements helped you understand this topic. You can implement the most successful solutions, in your opinion, on your websites - be it connecting a full-fledged library or simply integrating small option code.
If you know any more interesting features and snippets, send URLs to them in the comments. And we will supplement the article in the future.
First of all, for those who are not yet completely in the subject or not at all in the subject, I will briefly explain what hover effects are. This different kinds effects (pop-up captions, tooltips, smooth transitions, transformation, rotation, enlargement, displacement, etc., etc.) applied to website elements when hovering the mouse cursor over them. These effects can be realized using various jQuery plugins, and in pure CSS3.
Today I have prepared a large selection of original hover effects for images created with using CSS 3, without connecting javascript libraries. I won’t talk about the advantages and disadvantages of implementing hover effects in pure CSS3, that’s another topic, just look at the examples and, if necessary, use the one you like on your website. All effects presented in the review are provided with a demo example and detailed documentation with source codes. The manuals are mostly in bourgeois language, but everything is more or less intuitive.
I would like to immediately draw your attention to the fact that all these examples will work correctly only in modern browsers, which support CSS3 properties.
In order not to ruin the overall picture, I did not distort the names of effects with machine translation (with the exception of some), I left the original titles as the developer called them.
A very interesting effect when hovering over image thumbnails using fine lines in design and typography. Several different types of effects for the appearance of image captions, soft and non-intrusive 3D transformations, and smooth transitions of pseudo-elements. Works only in modern browsers.
iHover is an impressive collection of pure CSS3 hover effects, with Bootstrap 3 support. Built on Scss CSS (file), easily modified with variables. The code is modular, there is no need to include the entire file. 30+ different effects in one package. Everything is pretty well documented and the effects are very easy to use. All you need to do is build the HTML markup correctly and connect CSS file to work.
Creates some simple yet stylish hover effects for image captions. The idea is to hover over the thumbnails to make the title, author's name, and contact buttons pop up. For some effects, 3D visual transformations are used.
A very simple transition effect, without any special bells and whistles, completely round image in a frame, transforms by changing focus when hovering and that’s it.
Hover effects for thumbnails using CSS3
The developer positions his work as an example of an image gallery with transition effects when annotations (captions) appear on the thumbnails. Confident support by modern browsers, including IE 9+, is declared. Of course, it’s difficult to call it a full-fledged gallery, but the effect of the appearance of signatures is quite interesting.
Next set CSS rules, to create impressive transformation effects when hovering over perfectly round thumbnails. The package contains 7 types of CSS3 transitions, very detailed documentation on configuration and use. The effects are supported by all modern browsers.
Rotating thumbnails on hover
A simple effect of rotating round thumbnails when you hover the mouse cursor over them, about the same you can see on my blog, in the announcements of posts on the main page. Implemented with a couple of lines of css code.
Literally translated: “Sexy effect when hovering over images.” Of course, you are unlikely to notice anything so sexy in this effect, unless you have a wild imagination, but the effect is interesting in its own way and is worth paying attention to.
Five different effects for images when you hover over them. Pop-up signatures in three variations, curtains in the form of changing the degree of transparency and rotation with horizontal movement.
4 Types of animation effects for image captions, implemented exclusively using CSS3. Different positions when appearing and transition effects, quite a standard design. To understand how animation works, take a look at source I didn’t find any demo pages or separate documentation.
Miniature galleries arranged in a grid with various effects for the appearance of signatures, rotation, development, pop-up, etc. The documentation on use and configuration is quite sparse, but if you really want to, you can figure it out.
This effect is nothing special, a banal change in the brightness of images when hovering, except that animation elements have been added. You will have to figure out the details of the implementation yourself by laying out the source code of the demo.
Another set of 10 hover effects for images, various modifications of thumbnails when hovering, enlargement, rotation, rotation, darkening, etc.
Border Animation Effect
Various frame animation effects around images look quite attractive, there is a detailed manual for setting up and using it.
Original CSS3 hover effects used for the effective appearance of image thumbnail captions when hovered over. The CSS ruleset includes 10 different effects that you can use individually to different pictures. The effects are truly impressive, especially considering that it was all done using CSS3. Detailed Guide, will help you figure out what's what.
The idea is to create an SVG that is a background shape for some text and turns into another shape on mouseover. In this way, you can make many different options; in the example, three types of transition effects are shown. Dignity using SVG is that we can resize the mold according to the sizes parent container.
Sliding images
The essence this effect is that the image is moved up and down to reveal the caption. If you work with the style parameters, I think you can achieve some pretty nice effects, but by default, everything looks very simple.
With this effect everything is simple, captions for pictures slide out at the top right or bottom left, in the form of a ribbon with a translucent dark background, everything is very simply reformatted using css properties.
An interesting solution: the thumbnails are presented in a darkened form; when you hover over them, the images appear and the signature pops up on a light background.
The caption for the image appears from the corner and expands diagonally across the entire area of the image.
Several Yet interesting solutions to implement pop-up captions for image thumbnails. In the online editor, you can experiment with the parameters and achieve more impressive results.
A set of beautiful effects when hovering over thumbnails, various types of appearance and design of captions for pictures. Thin lines in contrast with a slightly darkened background create easy-to-read information blocks.
Bizarre shapes and a magnification effect combined with the animated effect of the appearance of captions for image thumbnails.
Wonderful effects of overlaying icons on image thumbnails in various variations of appearance. The example uses a (+) symbol outlined in a circle using border-radius: in CSS, you can also use icon fonts to make the pop-up panel more informative.
6 Captions for pictures
6 Options for the appearance of pop-up image captions on hover using CSS3. Detailed lesson on implementation and configuration, sources available for downloading.
How to create some subtle and modern caption hover effects.
Learn 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.
Direction aware CSS3 Hover Effect with jQuery
Create a direction-aware hover effect using CSS3 and jQuery.
Learn how to create a direction aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse.
Circle Hover Effects with CSS Transitions
A tutorial about how to create different hover effects on circles with CSS transitions and 3D rotations
This CSS button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons a bit of JavaScript to add/remove effect classes is used.
Icon Hover Effects
A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
Here’s a collection of simple icon hover effects. Create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements.
Hover effects give any site a dynamic and lively look. Usually used for them JavaScript code, but with the advent of CSS3, you can already use only styling tools.
The effects presented in this material work in modern browsers. IE support is version dependent and must be thoroughly tested before using it in a real project.
Jerking up
This effect works great when you have multiple horizontally aligned elements. Moving the mouse cursor along such a ruler generates a wave.
It's very easy to make. For each element, a field is defined and when you hover the mouse cursor, the size of the field decreases. Initial value The margin is 15px, it is reduced to 2px, which makes the image “bounce up”. This effect can also be used for text in a list.
The transition property is used here as an addition, since the effect looks great without it. It gives a smooth effect.
CSS
Ex1 img( border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; ) .ex1 img:hover ( margin-top: 2px; )
As you hover the mouse over each image, it slowly increases in size, and when you lose focus, it returns to its original size.
For this effect, a set of images measuring 400x133 px is used. They are then reduced in size in the CSS code to 300x100 px and expanded on mouseover. Horizontal centering is used, and a resized image might ruin everything, so a negative margin value of half the width is applied.
CSS
#container ( width: 300px; margin: 0 auto; ) #ex2 img( height: 100px; width: 300px; margin: 15px 0; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o -transition: all 1s ease; ) #ex2 img:hover ( height: 133px; width: 400px; margin-left: -50px; )
This effect is very similar using JavaScript, when when you hover your mouse over one object, another appears. To achieve this, the image and text are placed in the same div container, and then everything is shifted to the left so that both elements are on the same level. Then we apply the properties color: transparent And line-height: 0px For div element. This places the text at the top of the div and hides it.
To make the text appear on mouseover, we simply change the color and line height. This creates the effect of scaled text manifestation.
CSS
#ex3 ( width: 730px; height: 133px; line-height: 0px; color: transparent; font-size: 50px; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform: uppercase; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; ex3:hover ( line-height: 133px; color: #575858; ) #ex3 img( float: left; margin: 0 15px; )
This is one of the simplest, but very interesting effects for a miniature gallery. It is based on creating an array of images and rotating the image over which the mouse cursor is located.
There are many new, browser-specific ones used for this effect. CSS properties, so it won't work in older browsers. The gallery uses shadows, transitions and transformations.
If you want to further diversify the effect, you can use pseudo selectors to rotate images at different angles and in different directions.
CSS
#ex4 ( width: 800px; margin: 0 auto; ) #ex4 img ( margin: 20px; border: 5px solid #eee; -webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); - moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2); box-shadow: 4px 4px 4px rgba(0,0,0,0.2); -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; ) #ex4 img:hover ( -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); - o-transform: rotate(-7deg);
This is a wonderful and complex effect. Initially, images have a slight transparency. Then, when the mouse cursor hovers over it, the transparency is completely removed, a glow around it and a reflection appear (for Webkit browsers only).
CSS
#ex5 ( width: 700px; margin: 0 auto; min-height: 300px; ) #ex5 img ( margin: 25px; opacity: 0.8; border: 10px solid #eee; /*Transformation*/ -webkit-transition: all 0.5 s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.1))); ) #ex5 img:hover ( opacity: 1; /*Reflection*/ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4))); /*Glow*/ -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8); rgba(255,255,255,0.8); box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
Conclusion
The five effects shown are just a small example what you can do with CSS. Don't be afraid to experiment. Combining with each other simple elements you can get impressive results.
