CSS hover effects - for images, buttons, when hovering over links, blocks, etc. Nine simple examples of CSS3 animation Css effects when hovering over a block

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.

The hover effect in CSS styles is added to the right of the element as follows:

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 is 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 of 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

A selection of 5 simple options for implementing 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 features that allow you to do something more unusual than with the basic text-decoration property. 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 variants of the 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 solutions, Javascript and jQuery for hover effects can 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 to “animate” images or objects on hover. Using these functions, you can implement different appearances of 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 an information block with a title, a short description and a link to navigate. 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 the 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 are many unique features that have not been seen above.

The project includes 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 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 a small version of the code.

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

Translation

The power of CSS3 is enormous and in this tutorial you will see how to use it creatively. We're going to create some mouseover effects using CSS3 transitions. Hovering over a thumbnail will show a description of the thumbnails, using different styles in each example.

Please note that these examples will only work correctly in modern browsers that support CSS3 properties.

HTML markup

The markup structure is very simple and intuitive. Create a container that will contain the image and any other information such as title, description, etc.

Inside the block with the view class we will insert an element with the mask class, which will be responsible for our CSS3 effects, inside it we will place the title, description and link to the full image. (For some examples, we will need to add mask as a separate element and wrap the description in a div with a content class.)

Title

CSS

After creating the markup, we will create our styles.

We'll set general rules for our styles, and then we'll add special classes with the effects we want. In this article we will omit CSS prefixes for various browsers, but you can see them in the source code.
.view ( width: 300px; height: 200px; margin: 10px; float: left; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center ) .view .mask, .view .content ( width: 300px; height: 200px; position: absolute; overflow: hidden ; top: 0; left: 0 ) .view img ( display: block; position: relative ) .view h2 ( text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 20px 0 0 0 ) .view p ( font-family: Georgia, serif; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center ) .view a.info ( display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color : #fff; text-transform: uppercase; box-shadow: 0 0 1px #000 ) .view a.info:hover ( box-shadow: 0 0 5px #000 )
Now we'll look at ten effects.

Example 1

Let's add a special view-first class to the element with the view class for this effect. We will add a special class for each instance of the view element (view-first, view-second, view-third, etc.).

In the first example, we'll just use some basic transitions to create a nice hover effect:
.view-first img ( transition: all 0.2s linear; ) .view-first .mask ( opacity: 0; background-color: rgba(219,127,8, 0.7); transition: all 0.4s ease-in-out; ) .view-first h2 ( transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; ) .view-first p ( transform: translateY(100px); opacity: 0; transition: all 0.2s linear; ) .view-first a.info( opacity: 0; transition: all 0.2s ease-in-out; )
And now the most interesting part of our effect. When we move the cursor over an image, we can use the delay property to simulate a simple animation. The transition-delay we use on hover can be changed to be different from the normal class. In this example, we have not used any delay in the normal class, but we have added a delay to the hover which will slightly delay the transition effect.
.view-first:hover img ( transform: scale(1.1); ) .view-first:hover .mask ( opacity: 1; ) .view-first:hover h2, .view-first:hover p, .view-first :hover a.info ( opacity: 1; transform: translateY(0px); ) .view-first:hover p ( transition-delay: 0.1s; ) .view-first:hover a.info ( transition-delay: 0.2s ; )

Example 2

In the second example, we will add a special view-second class, but we will leave the element with the mask class empty and wrap the description in a div with the content class.

Hover Style #2

Some description

Here the mask class will have various attributes, in particular we are going to apply the transform property (translate and rotate). The description elements will be moved so that we can move them together on hover:
.view-second img ( transition: all 0.2s ease-in; ) .view-second .mask ( background-color: rgba(115,146,184, 0.7); width: 300px; padding: 60px; height: 300px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; ) .view-second h2 ( border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: translate(200px, -200px); transition: all 0.2s ease-in-out; ) .view-second p ( transform: translate(-200px, 200px); transition: all 0.2s ease-in-out; ) .view-second a.info ( transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; )
For our hover effect, we use a translate transform to move our elements into place. mask will also rotate. Description elements will move with a slight delay:
.view-second:hover .mask ( opacity:1; transform: translate(-80px, -125px) rotate(45deg); ) .view-second:hover h2 ( transform: translate(0px,0px); transition-delay: 0.3s; ) .view-second:hover p ( transform: translate(0px,0px); transition-delay: 0.4s; ) .view-second:hover a.info ( transform: translate(0px,0px); transition- delay: 0.5s; )

Example 3

In the third example we will use translate and rotate transformation:
.view-third img ( transition: all 0.2s ease-in; ) .view-third .mask ( background-color: rgba(0,0,0,0.6); opacity: 0; transform: translate(460px, -100px ) rotate(180deg); transition: all 0.2s 0.4s ease-in-out; ) .view-third h2( transform: translateY(-100px); transition: all 0.2s ease-in-out; ) .view-third p ( transform: translateX(300px) rotate(90deg); transition: all 0.2s ease-in-out; ) .view-third a.info ( transform: translateY(-200px); transition: all 0.2s ease-in- out; )
These are simple instructions that will be applied when hovering. Now we will flip the element description by setting the transition-delay accordingly:
.view-third:hover .mask ( opacity:1; transition-delay: 0s; transform: translate(0px, 0px); ) .view-third:hover h2 ( transform: translateY(0px); transition-delay: 0.5s ; ) .view-third:hover p ( transform: translateX(0px) rotate(0deg); transition-delay: 0.4s; ) .view-third:hover a.info ( transform: translateY(0px); transition-delay: 0.3s; )

Example 4

In the fourth example, we'll perform a simple image reduction and rotation of our content, all thanks to scale transformation. We'll set the transition-delay to 0.2 for the image styles, but on hover we'll change it to 0s. This will start the animation immediately when the mouse is hovered, but delay it when the cursor moves away.
.view-fourth img ( transition: all 0.4s ease-in-out 0.2s; opacity: 1; ) .view-fourth .mask ( background-color: rgba(0,0,0,0.8); opacity: 0; transform: scale(0) rotate(-180deg); transition: all 0.4s ease-in; border-radius: 0px; ) .view-fourth h2( opacity: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transition: all 0.5s ease-in-out; ) .view-fourth p ( opacity: 0; transition: all 0.5s ease-in-out; ) .view-fourth a.info ( opacity: 0; transition: all 0.5s ease-in-out; )
These are the instructions to get this effect - you can do anything with CSS3 :).
.view-fourth:hover .mask ( opacity: 1; transform: scale(1) rotate(0deg); transition-delay: 0.2s; ) .view-fourth:hover img ( transform: scale(0); opacity: 0 ; transition-delay: 0s; ) .view-fourth:hover h2, .view-fourth:hover p, .view-fourth:hover a.info( opacity: 1; transition-delay: 0.5s; )

Example 5

In this fifth example, we will use the translate property along with the transition-timing-function ease-in-out to move the content to the left side.
.view-fifth img ( transition: all 0.3s ease-in-out; ) .view-fifth .mask ( background-color: rgba(146,96,91,0.3); transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; ) .view-fifth h2( background: rgba(255, 255, 255, 0.5); color: #000; box-shadow: 0px 1px 3px rgba(159, 141 , 140, 0.5); ) .view-fifth p( opacity: 0; color: #333; transition: all 0.2s linear; )
The hover effect will shift the image to the right and the description will appear on the left side, as if it had shifted the image:
.view-fifth:hover .mask ( transform: translateX(0px); ) .view-fifth:hover img ( transform: translateX(300px); transition-delay: 0.1s; ) .view-fifth:hover p( opacity: 1; transition-delay: 0.4s; )

Example 6

In this example, we will make the description appear in front, and reduce the image to its original size (scale from 10 to 1). A “read more” button will appear at the bottom (translate).
.view-sixth img ( transition: all 0.4s ease-in-out 0.5s; ) .view-sixth .mask( background-color: rgba(146,96,91,0.5); opacity:0; transition: all 0.3 s ease-in 0.4s; ) .view-sixth h2( opacity:0; border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale( 10); transition: all 0.3s ease-in-out 0.1s; ) .view-sixth p ( opacity:0; transform: scale(10); transition: all 0.3s ease-in-out 0.2s; ) .view -sixth a.info ( opacity:0; transform: translateY(100px); transition: all 0.3s ease-in-out 0.1s; )
The return transition will be delayed so that it appears smooth:
.view-sixth:hover .mask ( opacity:1; transition-delay: 0s; ) .view-sixth:hover img ( transition-delay: 0s; ) .view-sixth:hover h2 ( opacity: 1; transform: scale (1); transition-delay: 0.1s; ) .view-sixth:hover p ( opacity:1; transform: scale(1); transition-delay: 0.2s; ) .view-sixth:hover a.info ( opacity :1; transform: translateY(0px); transition-delay: 0.3s; )

Example 7

In the seventh example, the idea is to rotate the image in the center and move it into the distance. Then the description will appear, hiding the rotating image behind it.
.view-seventh img( transition: all 0.5s ease-out; opacity: 1; ) .view-seventh .mask ( background-color: rgba(77,44,35,0.5); transform: rotate(0deg) scale( 1); opacity: 0; transition: all 0.3s ease-out; transform: translateY(-200px) rotate(180deg); ) .view-seventh h2( transform: translateY(-200px); transition: all 0.2s ease- in-out; ) .view-seventh p ( transform: translateY(-200px); transition: all 0.2s ease-in-out; ) .view-seventh a.info ( transform: translateY(-200px); transition: all 0.2s ease-in-out; )
On hover we will add a delay to the description elements. This will allow us to see the rotating image before the description hides the image. In the reverse transition, everything will disappear immediately, and we will see the image rotating in the opposite direction:
.view-seventh:hover img( transform: rotate(720deg) scale(0); opacity: 0; ) .view-seventh:hover .mask ( opacity: 1; transform: translateY(0px) rotate(0deg); transition- delay: 0.4s; ) .view-seventh:hover h2 ( transform: translateY(0px); transition-delay: 0.7s; ) .view-seventh:hover p ( transform: translateY(0px); transition-delay: 0.6s ; ) .view-seventh:hover a.info ( transform: translateY(0px); transition-delay: 0.5s; )

Example 8

In the eighth example we will use animation and recreate the bounce effect. The description will descend from the bottom and bounce off the bottom border.
.view-eighth .mask ( background-color: rgba(255, 255, 255, 0.7); top: -200px; opacity: 0; transition: all 0.3s ease-out 0.5s; ) .view-eighth h2( transform : translateY(-200px); transition: all 0.2s ease-in-out 0.1s; ) .view-eighth p ( color: #333; transform: translateY(-200px); transition: all 0.2s ease-in-out 0.2s; ) .view-eighth a.info ( transform: translateY(-200px); transition: all 0.2s ease-in-out 0.3s; )
We'll add an animation to the mask element and define some delay settings for the description elements:
.view-eighth:hover .mask ( opacity: 1; top: 0px; transition-delay: 0s; animation: bounceY 0.9s linear; ) .view-eighth:hover h2 ( transform: translateY(0px); transition-delay: 0.4s; ) .view-eighth:hover p ( transform: translateY(0px); transition-delay: 0.2s; ) .view-eighth:hover a.info ( transform: translateY(0px); transition-delay: 0s; )
To recreate the actual bounce effect we will use translateY, as you can see there are several frames that create this effect:
@keyframes bounceY ( 0% ( transform: translateY(-205px);) 40% ( transform: translateY(-100px);) 65% ( transform: translateY(-52px);) 82% ( transform: translateY(-25px) ;) 92% ( transform: translateY(-12px);) 55%, 75%, 87%, 97%, 100% ( transform: translateY(0px);) )

Example 9

In this example, we will use two mask elements to move them from the bottom right and top left corners:

Hover Style #9

The mask elements will have different translation and transfrom-origin values. We will also indicate that one is aligned to the top border, and the other to the bottom:
.view-ninth .mask-1,.view-ninth .mask-2( background-color: rgba(0,0,0,0.5); height: 361px; width: 361px; background: rgba(119,0,36 ,0.5); opacity: 1; transition: all 0.3s ease-in-out 0.6s; ) .view-ninth .mask-1 ( left: auto; right: 0px; transform: rotate(56.5deg) translateX(-180px ); transform-origin: 100% 0%; ) .view-ninth .mask-2 ( top: auto; bottom: 0px; transform: rotate(56.5deg) translateX(180px); transform-origin: 0% 100%; ) .view-ninth .content( background: rgba(0,0,0,0.9); height: 0px; opacity: 0.5; width: 361px; overflow: hidden; transform: rotate(-33.5deg) translate(-112px, 166px); transform-origin: 0% 100%; transition: all 0.4s ease-in-out 0.3s; ) .view-ninth h2( background: transparent; margin-top: 5px; border-bottom: 1px solid rgba( 255,255,255,0.2); .view-ninth a.info( display: none; )
When hovering, we will make the content appear as if from under two mask elements moving towards the center:
.view-ninth:hover .content( height: 120px; width: 300px; opacity: 0.9; top: 40px; transform: rotate(0deg) translate(0px,0px); ) .view-ninth:hover .mask-1, .view-ninth:hover .mask-2( transition-delay: 0s; ) .view-ninth:hover .mask-1( transform: rotate(56.5deg) translateX(1px); ) .view-ninth:hover .mask -2 ( transform: rotate(56.5deg) translateX(-1px); )
We've configured the transition-delay for the mask elements so that when we hover, the transition happens instantly, but when the mouse moves away, there will be a longer delay.

Example 10

In the last example, we will enlarge the image and then hide it, bringing the description to the front. We can do this by using a scale transform and adjusting the transparency level:
.view-tenth img ( transform: scaleY(1); transition: all 0.7s ease-in-out; ) .view-tenth .mask ( background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; ) .view-tenth h2( border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #333; transition: all 0.5s linear; opacity: 0; ) .view-tenth p ( color: #333; opacity: 0; transform: scale(0); transition: all 0.5s linear; ) .view- tenth a.info ( opacity: 0; transform: scale(0); transition: all 0.5s linear; )
When hovering, we simply scale the image, but why hide it by reducing its transparency to 0:
.view-tenth:hover img ( transform: scale(10); opacity: 0; ) .view-tenth:hover .mask ( opacity: 1; ) .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info( transform: scale(1); opacity: 1; )

Conclusion

CSS3 has really great potential for creating beautiful effects. Soon, hopefully, we will be able to avoid using JavaScript to create simple effects and rely 100% on CSS, in all browsers.

I hope you enjoyed these experiments, but most of all I hope they can inspire you to create your own effects.

P.S. This article is a logical continuation of the article from Mary Lou

Tags: Add tags

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

for CSS3 thumbnails

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.

Rotate 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, darkening, 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.

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:.

Do you want to start working on creating a website as quickly as possible? Now it's absolutely possible! For the simple reason that a new section has appeared on the TemplateMonster marketplace with . The collection will be replenished, but even now you can already look for something suitable for your online project. All you need to do is choose your ideal ready-made solution and work with the presentation of the necessary information. And don't forget that the text for the template was written by hand.

With all respect, Andrew

The SendPulse service is a marketing tool for creating a subscription base and converting casual visitors to your website into regular ones. SendPulse combines on one platform the most important functions for attracting and retaining customers:
● e-mail newsletters,
● web push,
● SMS mailings,
● SMTP,
● newsletters in Viber,
● sending messages to facebook messenger.

Email newsletters

You can use various tariffs for conducting e-mail mailings, including free ones. The free plan has restrictions: the subscription base is no more than 2500.
The first thing you need to start with when working with the e-mail newsletter service is to create your own address book. Set a title and upload a list of email addresses.

It’s convenient to create on SendPulse subscription forms in the form of a pop-up window, built-in forms, floating and fixed in a certain part of the screen. Using subscription forms, you will collect a subscriber base from scratch or add new addresses to your base.
In the form designer, you can create exactly the subscription form that best meets your needs, and the service tips will help you cope with this task. It is also possible to use one of the available ready-made forms.

When creating subscription forms, be sure to use an email with a corporate domain. Read how.
Message templates will help you beautifully design your letters to subscribers. You can create your own letter template in a special designer.

Automatic mailings. Content managers actively use automatic mailing. This helps automate the process of working with clients. You can create an automail newsletter in several ways:
● Sequential series of letters. This is the simplest option when, regardless of the conditions, several letters are written that will be sent to recipients in a certain order. There may be options here - series of messages(simple message chain), special date(letters are timed to specific dates), trigger letter– the letter is sent depending on the subscriber’s actions (opening a message, etc.).
● Automation360– mailing with certain filters and conditions, as well as taking into account conversions.
● Ready-made chains according to the template. You can create a series of letters using a given template or modify the template and adjust it to your needs.
A/B testing will help you experiment with different options for sending a series of letters and determine the best option based on opens or clicks.

Sending Push Notifications

Push mailings are a subscription in a browser window, this is a kind of replacement for RSS subscriptions. Web-push technologies have rapidly entered our lives, and it is already difficult to find a website that does not use push mailings to attract and retain customers. Request script for , you can send letters either manually or create auto-mailings by creating a series of letters or collecting data from RSS. The second option implies that after a new article appears on your website, a notification about this will be automatically sent to your subscribers with a brief announcement.

New from SendPulse– now you can monetize your site using Push notifications by embedding advertisements in them. Upon reaching $10, payments are made every Monday to one of the payment systems - Visa/mastercard, PayPal or Webmoney.
Push messages on the service are absolutely free. Payment is taken only for White Label - mailings without mentioning the SendPulse service, but if the service logo does not bother you, then you can use push notifications for free without restrictions.

SMTP

The SMTP function protects your mailings from being blacklisted by using whitelisted IP addresses. Cryptographic signature technologies DKIM and SPF, which are used in SendPulse mailings, increase the trust in the letters sent, making your letters less likely to end up in spam or blacklist.

Facebook Messenger Bots

Facebook chatbot is in beta testing. You can connect it to your page and send messages to subscribers.

Sending SMS

Through the SendPulse service it is easy to send mailings using a database of phone numbers. First, you need to create an address book with a list of phone numbers. To do this, select the “Address Book” section, create a new address book, and upload phone numbers. Now you can create an SMS newsletter using this database. The price of SMS messaging varies depending on the recipient's telecom operators and averages from 1.26 rubles to 2.55 rubles per 1 SMS sent.

affiliate program

SendPulse implements an affiliate program, within which a registered user using your link who has paid for the tariff will bring you 4,000 rubles. The invited user receives a discount of 4,000 rubles for the first 5 months of using the service.

The post contains a selection of various CSS effects and animations that can be useful in your work, and will also eliminate the need to constantly resort to JavaScript. The examples may not be the newest or most unusual, but in my opinion, they are useful.

1. CSS3 Clock with jQuery

This clock is created using one of the main CSS3 tools - rotate and connecting the JQuery library.

2. CSS Analog Clock

More classic, analog watches. They are created using webkit transition and the transform CSS property. But in order for the time to correspond to the current one, you need JavaScript.

3. Rotating 3D cube

Rotation and movement on the sides of the cube will be done with the standard keys “up”, “down”, “left” and “right”. The 3D figure itself is built using webkit-perspective, -webkit-transform and -webkit-transition.

4. Several retractable 3D cubes

There are already several 3D cubes presented here that use CSS3 and the transform and transition properties themselves. Hovering the cursor over the cube causes it to move to the side, revealing the text that is on the other side of the shape.

5. Accordion menu

The accordion menu effect is based on pure CSS, where clicking on each line opens an additional window in the body of the list itself. Custom animation in WebKit-based browsers.

6. Parallax scrolling with CSS

This is an animated parallax scrolling animation using CSS transitions based on WebKit. When you hover over the text window, the stars in the background begin to move smoothly to the side. The effect of flight is created.

7. Matrix

The cult film “The Matrix” is one of the best science fiction films. The example shows how to recreate approximately the same amazing animation (black screen with running numbers) in CSS3.

8. Dynamic Palaroids

This example provides a detailed description of creating animated photos based on CSS3 commands. When you click on an image, it enlarges and moves to the foreground.

9. Image Scaling

In this example, the images simply enlarge on hover. A simple, but sometimes very useful effect.

10. JavaScript Effects on CSS3

As an alternative to JavaScript, the post suggests seven CSS3 effects: various blocks that rotate, disappear, move out, grow, etc.

11. DJ Hero virtual records

This post explains how to create spinning records. The rotation speed can be adjusted directly on the screen.

12. Sliding vinyl

The vinyl record sliding effect is created using CSS3 and HTML transitions. Such animation brings a web page to life, adds originality to a standard album cover, etc.

13. Effects when hovering over a picture

When you hover the cursor over an image, it can move to the side, spin, shrink, transform from square to round, become blurry... In a word, the pictures will change their properties in every possible way.

14. Rotating triangle

When you click on the triangle, it starts to rotate.

15. Space

A whole cosmic space, packed into CSS. This is an example of rotating layers (more noticeable when you zoom out in the browser).

16. “Las Meninas” in 3D

An interesting CSS effect that makes the famous painting by Diego Velazquez “Las Meninas” appear three-dimensional.

17. CSS for Mac OS X

At the bottom of the screen is a set of main Mac OS X icons, which enlarge when hovered over. The effect adds dynamics to the site.

18. Drop-In Modals

CSS3 effects and Drop-In Modals properties will help you create fast, animated and easy modal changes.

19. Animating objects

A transformation changes the appearance of an element in the browser. Shown using the example of a rocket that “flies” from one end of the screen to the other. Move, rotate, etc. tools can be used.

20. Colored clock

Color Clock is based on jQuery and CSS3. A similar effect will come in handy in the context of waiting for the completion of some competition, voting, and the like.

21. Lightbox Gallery with jQuery and CSS3

This is a wonderful gallery that allows you to sort and arrange images in random order. For interactivity, the gallery uses JQuery, JQuery UI and the JQuery FancyBox plugin. Lightbox supports the title and description of pictures, groups them and automatically arranges slides in a row.

22. “Elastic” previews

Enlarge image previews on hover. Thus, when you click, the menu increases proportionally.

23. Dynamic cards

This example is a dynamic set of cards using HTML and CSS3 features.

24. JQuery Sliding Menu

The example slideout menu is created using a combination of CSS3 and JQuery. When you hover over the image, a pop-up window with text appears.

25. CSS Tabs

In the example, hovering the mouse over the tab headers causes the list below to change.

26. Fisheye menu

The example demonstrates how to create a Fisheye menu using CSS and SVG animation. As an added bonus, a demo SVG is used in the IMG tag.

27. Dropdown menu

This type provides very convenient navigation through the main menu, thanks to the use of CSS3 transitions.

28. Star Wars credits

Famous credits from Star Wars. HTML and CSS will be enough to run them.

29. More Fisheye effects on CSS

Again, icons that increase when hovered over.

30. Frame-by-frame animation

Several demonstration options are possible.
In the first example, to ensure a frame change, you need to click on the image. Each click is one movement. The frames are repeated, creating a certain loop.
In the second example, to change frames, just move the cursor over the image. Accordingly, the animation speed will depend on the speed of the mouse movement.