CSS interesting effects. Original hover effects for pure CSS3 images

First of all, for those who are not quite in the subject or not at all in the subject, I will briefly explain what hover- is. These are various types of effects (pop-up captions, tips, smooth transitions, transformation, rotation, increase, displacement, etc., etc.) applied to the elements of the website on them with the mouse cursor. These can be implemented both with the help of various jQuery plugins, and on pure .
Today I prepared a large selection of original hover effects for images created with CSS3, without including javascript libraries. I won’t talk about the advantages and disadvantages of implementing hover effects on pure CSS3, this is another topic, just look at the examples and, if necessary, use the one you like on your site. All effects presented in the review are provided with a demo and detailed documentation with source codes. The manuals are mostly in bourgeois, but everything is more or less intuitive.

Just want to draw your attention to the fact that all these examples will only work correctly in modern browsers that support CSS3 properties.

In order not to break the overall picture, I did not distort the names of the effects with machine translation (with the exception of some), I left the original titles as the developer called them.

Very interesting hover effect on image thumbnails, using thin lines in design and typography. Several different kinds of image caption effects, soft and non-obtrusive 3D transformations, and smooth pseudo-element transitions. 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 modifiable 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, the effects are very easy to use. All you need to do is to correctly build the HTML markup and include the CSS file to work.

Creates some simple yet stylish hover effects for image captions. The idea is that when you hover over the thumbnails, you can get the title, author name, and link button to show up effectively. Some effects use 3D visual transformations.

A very simple transition effect, without any bells and whistles, a completely round image in a frame, it transforms by changing the focus on hover and that's it.

for CSS3 thumbnails

The developer positions his work as an example of an image gallery with transition effects when annotations (captions) to thumbnails appear. Confident support is declared by modern browsers, including IE 9+. Of course, it is difficult to call it a full-fledged gallery, but the effect of the appearance of signatures is quite interesting.

Another set of CSS rules to create impressive hover effects on perfectly round thumbnails. The package contains 7 types of CSS3 transitions, very detailed documentation on setting up and using. The effects are supported by all modern browsers.

Rotate thumbnails on hover

A simple effect of rotating round thumbnails when hovering over them with the mouse cursor, you can see about the same on my blog, in the post announcements on the main page. It is implemented in a couple of lines of css code.

If translated literally: "Sex effect when hovering over". Of course, you are unlikely to notice something so sexy in this effect, unless you have a wild imagination, but the effect is interesting in its own way and it is worth paying attention to it.

Five different effects for images when hovering 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 by means of CSS3. Different positions at the appearance and transition effects, quite a standard performance. To understand how the animation works, take a look at the source code of the demo page, I did not find any separate documentation.

Grid-lined thumbnail galleries with various caption appearance, rotation, fade, float, etc. effects. Documentation on use and configuration is rather scarce, but you can figure it out with a special desire.

This effect does not represent anything special, a banal change in the brightness of images on hover, except that animation elements are added. You will have to deal with the details of the implementation yourself by decomposing the demo source codes.

Another set of 10 hover effects for images, various modifications of thumbnails on hover, zoom, rotate, rotate, darken, etc.

Various frame animation effects around images, looks quite attractive, there is a detailed guide for setting up and using.

Original CSS3 hover effects used to make image thumbnail captions appear effectively on hover. The set of CSS rules includes 10 different effects that you can use separately for different images. The effects are truly impressive, especially considering that it's all done with CSS3. A 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 a different shape on hover. In this way, you can make many different options, but in the example, three types of transition effects are shown. The advantage of using SVG is that we can resize the form to match the size of the parent container.

Sliding images

The essence of this effect is that the image moves up and down to make the caption appear. If you work with the style parameters, I think you can achieve quite nice effects, and by default, everything looks very simple.

With this effect, everything is simple, the captions to the 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 reshaped using the 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 to the entire area of ​​the image.

A few more interesting solutions for implementing pop-up captions for image thumbnails. In the online editor, you can experiment with the options 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 magnification effect in conjunction with the animated effect of the appearance of captions to image thumbnails.

Wonderful icon overlay effects on image thumbnails in various appearance variations. The example uses a (+) character outlined by a circle using border-radius: in CSS, you can also use an icon font to make the popup panel more informative.

An example of creating a visual slide effect for displaying voluminous image captions using only CSS3 and HTML5.

6 Picture Captions

6 Variants of appearance of pop-up captions for images on hover using CSS3. A detailed lesson on implementation and configuration, source codes available for download.

And finally, in the end, so to speak, I can’t help but mention the simplest way to create a pop-up caption for a thumbnail using CSS3.

I talked about this method in one of my previous lessons:.

With all respect, Andrew

Very often on sites you could see a change or buttons on hover. A special pseudo-class: hover in CSS allows you to implement the task. Today we will consider some tricks that allow you to make this feature, and below we will publish a list of the most interesting of them (with brief descriptions / explanations). All options are divided into:

These groups are very conditional, because. many examples intersect and are universal, that is, they can occur when designing different objects.

The hover effect in CSS styles is added to the right of an element like this:

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 be set to 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); )

Modern browsers handle the CSS hover effect equally well, although older versions of IE 6 and below only work on 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 address that is currently active. It is important to place the hover effect in CSS after :link and :visited if they exist.

Let's move from theory to practice. Below is a list of useful materials and snippets - follow the links to view the source.

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 for you.

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 is also launched (each has its own).

CSS Icons on Hover

A selection of 5 simple options for implementing the task. In all cases, additional icons are involved 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

A few tricks that allow you to do something more unusual than with the basic text-decoration property. The background of the button is additionally filled with different visual effects.

Info on Hover

The tooltip functionality is currently supported in all browsers, but you can customize it to suit your needs. In the current example, the pseudo-class is fired for the dfn tag, and it looks stylish. The code is quite compact HTML + CSS.

Mana Button

One of the most original variants of the hover effect in blocks - when hovering, it is like filling it with liquid. The implementation uses CSS, HTML, and SVG. In a certain theme of sites, this snippet will definitely be a godsend.

Hover effects for images

15 basic tricks

Despite the fact that the article was published a long time ago, the methods still work correctly. Here, probably, all possible typical transformations for graphics are collected: several types of zoom, rotation, blur, black and white, transparency, filters, shine, etc. Very useful material.

Beautiful hover effects images

A selection of 30 nice and smooth actions when hovering over a picture. Due to simple visual manipulations in the form of zoom, adding lines, a good complex impression is created. In some places, the title increases and the short description “pulls up”. Great option for a portfolio.

Barberpole Hover Animation

Not complicated at first glance, the animation, which in the end looks very cool and non-standard.

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 in the course of work the location and direction of the cursor movement is determined. This, in turn, allows you to create quite original reactions when hovering over page elements:

In many complex Javascript and jQuery solutions for hover effects, you can significantly diversify and improve the result.

Direction Aware Hover Goodness

Direction Aware Tiles using clip-path Pure CSS

Look for the rest of the chips in the original article.

Animation

This development has more than 100 simple ways to "animate" images or objects on hover. With the help of these functions, you can implement different appearance of buttons, titles, texts, social icons, etc. There are options with changing the display of pictures, translucent background overlays.

The link contains 7 CSS3 hover heading effects - when hovering over an image, the user will see an information block with a title, a brief description and a link to go. It cannot be said that the examples are very original, but they will definitely help diversify a static content project.

CSS Hover Libraries

hover.css

The uncomplicatedly named Hover.css project contains a collection of CSS3 effects for links, buttons, blocks, and so on. You can use the ready-made code and / or add your own modifications to it. There are a lot of interesting things 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 for pictures - in the free version you will find 44 transformation options (the premium set contains 5 times more of them). LESS and SCSS are also supported here, this case weighs only 19kb. The site has a page with a demonstration of all working examples. It offers many unique features that have not been seen above.

The project has more than 30 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 is implemented in pure CSS3 + HTML (plus Scss files are included). Excellent compatibility with Bootstrap 3, there is documentation.

Total. We hope these css hover effects on images, blocks, links and other page elements have helped you understand this topic. You can implement the most successful solutions, in your opinion, in your sites - whether it is connecting a full-fledged library or simply integrating a small version of the code.

If you know any other interesting features and snippets, please send URLs to them in the comments. And we will update the article in the future.