From the author: several lessons on creating hover effect ov on pure CSS, tied to the direction of the cursor. The lessons are intended for those who have at least basic knowledge 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 to automatically substitute 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:

< div > < ul > < / ul > < ol > < / ol > < p > < / p > < p > < / p > < / div >

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.

Content

< div class = "container" > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < a href = "http://gabriellew.ee" > < / a > < div class = "card" > < h1 >Content< / h1 > < / div > < / div >

Let's add some SASS/CSS to position all the links in the corners of the card. You could make more links, but for simplicity we'll take four. To speed up the process we will use Haml.

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.

hover effect

a ( &:hover, &:focus ( ~ .card ( // CSS code ) ) )

& : hover , & : focus ( ~ . card ( // CSS code

The card will change when you hover over any link, unlike the + selector, which selects only nearby adjacent elements.

Transformations

The corners are defined correctly, now we will add transformations that will tilt the card at the corners. The first step is to add a perspective to the container. I usually use something around 1000px so that I can show a slight depth.

For this type of parallax, the most important property is not the transform, but the transform-origin applied to the card. It must be changed for all detection zones and 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; ) ) ) ) )

// frame 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 ( & : hover , & : focus ( ~ . card ( Border( transform: translateZ(24px); // push the frame back by clicking & : 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.

< div class = "link" > < a href = "http://codepen.io/gabriellewee/"> < / a > < div >Front content< / div > < div >Back content< / div > < / div > < / div >

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 tied to the mouse. 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 have the current link occupy 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!

Smooth transition from monochrome image to colored 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 mouseover 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 effect of smooth color change on hover

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. Animation effect in two versions: with a cast shadow and with reflection.

13. jQuery hover effect “Images Hover Cycle effect”

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. This different kinds 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 using various jQuery plugins, and on a clean one.
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 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 by variables. The code is modular, there is no need to include the entire file. 30+ various 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, 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.

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.

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

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 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 form to match the size of the 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.

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 captions appearing on 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. Detailed lesson on implementation and configuration, sources available for downloading.

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

The idea of ​​separating the presentation of information from the code that creates and processes it became radically new. It was strong solution at one time, but this point was not fully recognized then. When programming separated from the individual computer, but did not become a winner in local network or a single domain zone, and immediately spread everywhere, only then did it become obvious that presenting information (in terms of design) and working with it (in terms of code) are two sides on the same plane.

Three facets of website development

From a formal point of view, there are three main components (in different syntactic forms) that make up a website: PHP code, JavaScript code and descriptions CSS styles. It doesn’t matter at all what the name or version of this or that component is used, what version HTML markup is used and what version of the browser is installed. Compatibility is not held in high esteem these days, because at every moment of time is relevant: what is encoded and what of what is encoded can be displayed and executed.

If earlier tongues fought over ideas, today standards makers in the field of Internet technologies and browsers prefer to fight in vain.

Personal and public

There are many means through which the Internet is accessible (computers, laptops, tablets, smartphones), and there are also plenty of browsers. There is no guarantee that a single device will display the site in the form in which the developer created it. The efforts of the latter do not always achieve the goal and provide web design with a single diversity, that is, the unity of display of the essence, wherever it is revealed to the visitor.

By separating the personal and the public, using only what works in the latter, you can achieve noticeable success in design. Beauty, artistic moment and web design are the destiny of relevant specialists and talents. CSS is code, albeit a very unique one. His concern is to describe styles (options for displaying information). With the advent of mobile CSS devices loaded with real coding in the form of media queries. So the possibility of a remarriage between design and code is not as unrealistic as it might have seemed just a couple of years ago.

When developing CSS styles, the developer relies on his personal proven experience and those CSS designs that work on most browsers and satisfy the majority of site visitors. You should use the first as much as possible and the second as little as possible, then there is a much greater chance of getting a result that works almost always and everywhere.

First rule: hope for the standard, but don’t make a mistake yourself

CSS:hover is when the mouse “enters” a page element. When the mouse clicks on an element, it becomes active, but when the cursor moves to the side, it can again change and show itself in an active state. “:hover”, “active” and “visited” are the most popular pseudo-classes when describing styles.

It is very convenient in the site code not to worry about such little things as moving the mouse over elements. By providing two descriptions in the style description table:

background-color: green;

We get it when you hover the mouse over element automatic change coloring the text from black to white and changing the background of this element to green. Pseudo-classes can be applied to any element and achieve a wide variety of visual effects.

Second rule: when trusting standards, focus on your code

Everything would be fine if progress remained at the level of computers and laptops equipped with mice, and progress in cellular communications did not lead to the emergence of smartphones, tablets and other mobile devices, to which connecting such a device is very problematic.

On the other hand, only on gadgets equipped with a special touch screen does it become possible to manipulate the fingers directly on touch screen, as has already become common on smartphones, tablets and similar devices.

Eat significant difference and:hover doesn’t work here at all as we would like. You can’t do this without code, and using media queries doesn’t solve all the issues.

Compatibility is too expensive in today's information world, therefore, to ensure proper functionality of the site within established requirements to web design and implementation of functionality, it is preferable to focus on the minimum necessary use cases: CSS hover, CSS hover focus, CSS hover active (visited). The more code (both in-browser and on the server) controls web design, the better. A program is control, it is better when this control is not surrendered to the current standards, from which you often do not know what to expect.

Buttons and other page elements

Button hover CSS is a wonderful solution, but by and large every page element is a “button”. The site must, first of all, be alive, and if this is not included in the code, if the task is to create a site that develops adequately to the application area and acts taking into account the behavior of the visitor, then at least using CSS styles you can add liveliness to the page elements.

Using hover effects is convenient. With their help, you can easily add life to pages, but the code does not know what the mouse is doing on the screen if it does not have the ability to track its movement. From this point of view, that is, when the code controls the movement of the mouse (= finger movement on a smartphone), it can independently highlight the element or transform it. This has nothing to do with pseudo-classes, but gives full code control over the appearance of the page, allowing it to be adequately displayed on various devices in various browsers.

Pitfalls in style sheets

It is impossible to say that the standards in the field of describing CSS styles do not know what they are doing, but it is also impossible to say that they fully interact with other standards in the field of Internet programming.

Styles and pseudo-classes can be described at the page coding stage, at the moment when the server generates the page and in dynamics: already being inside the browser, you can easily create a new style and change the existing one.

Using AJAX, when there is no need to regenerate the page to display a reaction to a visitor’s action, but rather changing its element or several elements adds a little “spice.” The “friendship” of codes - what is already in the browser (JavaScript) and what is on the server (PHP) - is the lot of the site author (programmer).

Not only the display of its elements on the page, but also their further perception by the code significantly depends on how the algorithm for this interaction is executed. Simply put, pseudo-classes (in particular) are very good for static conditions, sort of like for a sailing yacht in a clear sea with light wind- everything is obvious, accessible and manageable. If the weather changes, or the wind picks up, or a visitor causes an emergency, you can quickly hit the reef and lose the visitor.

Standard and its emulation

Hover can be emulated via JavaScript by using the onmouseover and onmouseout events. Often this is where it all ends. From the standpoint of common sense, when it comes to creating a really working website, it is better to keep control in your own hands than to give it up to mythical standards that change beyond the will and desire of the developer.

Sometimes you can read something like " this opportunity is available even in IE,” but more often you can read about which style descriptions are perceived by a particular browser. Much less often you can learn about how JavaScript differs in certain browsers.

Assessing the accumulated experience, admiring the capabilities of Chrome and Opera, criticizing the slowness and inertia of the browser from the manufacturer (the unforgettable IE programmer from Microsoft, dear to the heart of every programmer: "Good old Internet Explorer Only the lazy did not scold. Or someone who only knows how to play Klondike on a computer,”- quote from an unknown Internet author), you should stick to the golden mean: use what works everywhere and always.

People need funds for work; when they need to get a thrill, they usually go to the registry office or the theater, but not to the Internet.

Emulation and control

Previously, when programming was getting on its feet, it was customary to listen to your elders and write correctly. Nowadays there are too many elders, everything is changing too quickly, and if you listen to everyone, there won’t be enough time even for very simple work, to a minimally functional website.

Programming is, first of all, control, and in cases where the standard sets the rules biasedly, or one can expect a sharp change in the rule, its elimination and the emergence of a new one, the best solution It was always not to make any decisions, but to implement the required functionality of the site with the minimum possible, but actually working code.

Hover effects give any site a dynamic and lively look. Usually used for them JavaScript code, but with the advent of CSS3, you can no longer use only styling tools.

Given in this material effects 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. The initial margin value is 15px, 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 diversify the effect even more, you can use pseudo selectors to rotate images under 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); -moz-box-shadow: 0px 0px 20px 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 of what you can do with CSS. Don't be afraid to experiment. Combining with each other simple elements you can get impressive results.