Original hover effects for images using pure CSS3. CSS hover effects - for images, buttons, when hovering over links, blocks, etc.

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; )

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); )

Modern browsers equally correctly perceive 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 complex 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 for 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 for pure CSS 3 + 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 add to the article in the future.

From the author: several lessons on creating hover effects in pure CSS, tied to the direction of the cursor. The lessons are intended for those who have at least basic knowledge of HTML and advanced knowledge of CSS/SASS.

Disclaimer

The effects do not work in older browsers; they require a browser with the ability to render 3D transformations. I tested the effects in latest versions Chrome browsers, Firefox and Safari.

I also use the wonderful AutoPrefixer library for automatic substitution vendor prefixes. Go to CodePen settings on CSS tab and select AutoPrefixer.

Hover effect with parallax

Introduction

My designer and I came across home page site Kikk Festival back in 2015, it implemented cards with a parallax effect when hovering over the cursor. We liked it and wanted to recreate this effect in our project. However, due to the nature of the code, we could not use JS. I started scouring around for pure CSS solutions and found something interesting.

Almighty tilde

One of my favorite selectors in CSS is the tilde (~), which selects the closest element that matches the selector but is located after the first element. For example, ul ~p will select p elements in the code below:

I realized that this can be used to create hover effects based on the direction of the cursor for almost anything!

Structure

The link structure is quite simple - a container with a set of tags and a container for the card content. All href attributes must have the same URL.

Since we don't have JS to alert us to the direction of mouse movement and cursor position, we'll use links to divide the card into detection zones. If, for example, the cursor lands on a link No. 1 is on top, then the mouse enters the detection zone No. 1 before entering No. 3 and No. 4.

For parallax of this type, the most important property there will be not a transform, but a transform-origin superimposed on the card. It must change for all detection zones and be assigned to the opposite corner from the current detection zone.

For example, if we enter detection zone No. 1 (top left), transform-origin should be bottom right, i.e. opposite corner. The bottom line is this: the affected corner should move away from us, and the remaining corners should move towards us.

Finishing touches

To complete our parallax effect, let's add a frame to the card, which will also bend when you hover over the link. This technique can be applied to other elements in the card.

// border styles.card ( position: relative; .border ( transform-origin: center center; position: absolute; top: 12px; left: 12px; width: calc(100% - 24px); height: calc(100% - 24px); border: 2px solid white; ) ) // parallax effect.container ( a ( &:hover, &:focus ( ~ .card ( .border ( transform: translateZ(24px); ) ) ) // push the frame back on click &:active ( ~ .card ( .border ( transform: none; ) ) ) ) )

All that remains is to (1) add a transition to the card to smooth out the transition in the corners, and (2) remove the link styles so that they are not visible. I like to set opacity to 0 to avoid incidents. To avoid overlap due to card rotations, I also move the hovered link forward.

Result

Below is the completed version of the parallax hover effect. CodePen. Toggle the checkbox to see the location of the links. To improve the parallax effect, I decided to add some more links.

The hover effect using a cube as an example

Introduction

Adult Swim Singles 2016 is another site with an impressive hover effect based on the direction of the cursor. By clicking on the calendar icon on the left top corner A 3D calendar opens, where each day is presented in the form of a cube, which rotates depending on the direction of the cursor. Great idea!

I immediately realized that a similar effect could be achieved using the tilde. I already had a cube shape that I could easily modify for links and parallax hover effects.

The basis

Now you can start creating the base of the cube with links. You need to create an outer container, four triangles that will be assembled into a square, and one inner container with six elements - four empty and two with content. I like this order: top, bottom, left, right, front, back.

To create triangular links you can use Clippy. For Firefox compatibility you also need SVG clip-path. Links must have a positive translateZ value (brought to the front), otherwise they will hide behind the cube.

To define the width, height and transformations for the cube, we use a variable with a value of 12px. To differentiate the sides of the cube, we use different shades of the same color to simulate lighting. The back side is completely white.

We rotated the cube slightly so you can see that all sides are aligned correctly. If you look at transform, you can see that all sides of the cube have a negative translateZ value. That is, all sides except the front are in the background.

The nature of 3D transformations is such that if you do not move the entire cube forward, then part of it may be cut off background. You can move the cube forward so you don't have this problem. Since I already had a cube, I barely touched it. Write in the comments if you have any difficulties creating a cube.

hover effect

Next you need to add a rotation on hover. The effect can be styled however you like, but the most realistic method I've found is mouse-bound. If the mouse enters the cube from the left, the cube should rotate from left to right. All turns must be 180deg/0.5turn or negative equivalents. We will also add a transition so that the cube rotates correctly.

Polishing

Two things need to be polished:

The bottom triangle turns the back text upside down.

Hover is too sensitive: transitioning between triangles causes unnecessary turns.

With text, the easiest way is to turn the back side to the right without smoothing to the main turn. For some reason, changing the bottom triangle also affects the top one. Therefore, we need to add an additional rotation for both hover effects.

The sensitivity of hover effects was more difficult to fix. The solution is to make the current link take up the entire space of the other three links (full width/height, remove the clip-path, move forward), but then the interesting angular effect disappears (when you quickly move the mouse along a curve over the cube). In the end, I solved the problem - I set a delay on transition so that the fix would not work if the cursor on the cube did not linger for more than a second. Delay does not eliminate all problems, but it mitigates most of them.

Result

Conclusion

So many interesting hover effects can be created using tildes, transformations and smooth transitions. My designer came up with the idea of ​​creating an aquarium in which the fish would swim in the opposite direction of the cursor. You can create a water ripple effect, you can rotate images with shift, and you can also create animations with motion blur. Write in the comments if you have already used this technique!

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. These are various types of effects (pop-up captions, tooltips, smooth transitions, transformation, rotation, enlargement, displacement, etc., etc.) applied to website elements when hovering the mouse 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 using CSS3, 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 that 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.

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 declared modern browsers, including IE 9+. 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, dimming, 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 hover effects on CSS3 used for the effective appearance of image thumbnail captions on hover. 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.

Kit 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 magnifying effect combined with animation effect the appearance of captions for image thumbnails.

Wonderful effects of overlaying icons on image thumbnails in various variations of appearance. The example uses the symbol (+) outlined in a circle with 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.

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 it is. These are various types of effects (pop-up captions, tooltips, smooth transitions, transformation, rotation, enlargement, displacement, etc., etc.) applied to website elements when you hover the mouse cursor over them. These effects can be implemented using various jQuery plugins or pure .
Today I have prepared a large selection of original hover effects for images created using CSS3, 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 that 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 thumbnail images, 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 include the CSS file in your 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, a 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.

Another set of 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.

To translate it literally: “Sexual effect when hovering over “. 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 the source code of the demo page; I didn’t find any 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, dimming, etc.

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. The CSS ruleset includes 10 different effects that you can use separately for different images. The effects are truly impressive, especially considering that it was all done using 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 another shape on mouseover. In this way, you can make many different options; in the example, three types of transition effects are shown. The advantage of using SVG is that we can resize the form to fit 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 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.

Some more interesting solutions for implementing 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.

An example of creating a visual slide effect for displaying 3D captions for images using only CSS3 and HTML5.

6 Captions for pictures

6 Options for the appearance of pop-up image captions on hover using CSS3. A detailed lesson on implementation and configuration, sources available for download.

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

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 it is. These are various types of effects (pop-up captions, tooltips, smooth transitions, transformation, rotation, enlargement, displacement, etc., etc.) applied to website elements on them with the mouse cursor. These can be implemented either using various jQuery plugins or in pure .
Today I have prepared a large selection of original hover effects for images created using CSS3, 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 that 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 thumbnail images, 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 include the CSS file in your 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, a 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.

Another set of 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.

Translated literally: "Sexual effect when hovering over ". 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 the source code of the demo page; I didn’t find any 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, dimming, etc.

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. The CSS ruleset includes 10 different effects that you can use separately for different images. The effects are truly impressive, especially considering that it was all done using 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 another shape on mouseover. In this way, you can make many different options; in the example, three types of transition effects are shown. The advantage of using SVG is that we can resize the form to fit 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 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.

Some more interesting solutions for implementing 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.

An example of creating a visual slide effect for displaying 3D captions for images using only CSS3 and HTML5.

6 Captions for pictures

6 Options for the appearance of pop-up image captions on hover using CSS3. A detailed lesson on implementation and configuration, sources available for download.

And finally, in the end, 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