Five cool hover effects using multiple background images
- Transfer
- Tutorial
Today we look at all the benefits of using multiple backgrounds. We will learn the basic basics and create cool effects when you hover using CSS
Below are five different examples you can use to create your own amazing effects.
Let's look at what should turn out in the end. Think about how you can implement these effects purely on one CSS.
Demonstration
Until recently, I did not use several images as a background. I knew that such an opportunity existed, but could not find her an interesting application. The parallax option is certainly interesting, but everyone is already tired.
In the end, I came up with the concept of using a multi-phone when hovering over an object. It turned out a kind of animation. This is a very simple trick, but I haven’t seen it anywhere before, so I decided to show you how to use it.
In fact, you can come up with a million different examples, but we will consider only five to understand the essence of the effect.
Basically, when you hover over objects, normal animation happens. For example, one image overlaps another, something rotates or bounces, the color fades, and so on.
When using the multi-phone, many animation options appear. Without much effort, you can create, at first glance, a complex animation using only the CSS property
Suppose we want to make an animation of the opening doors. To do this, just do the offset of the two background images in different directions:
Now we have an idea of the future work. So let's move on to the fun part - let's start creating effects.
Let's try to create the effect described in the previous figure. To get started, we need two background images.
Since we consider only the idea itself, it does not matter which images we use. I took a dark wood texture and a car icon from a free font .
Create a block
All examples will be located on one page, so I added styles to position the elements. But the most important thing is the use of the property
Our background images will be placed in one row, here they are shown with the use of fillet.
First, use two images as the background. Next, we use the trick, which is that the texture of the tree must be used twice. The result is three images.
In CSS, several images are defined quite simply, just list them with a comma.
The arrangement is logical: the first image will be at the top, the last will be at the bottom, that is, it will overlap with all the other images.
In the property,
Obviously, given groups of values correspond to given images. The first value in each group moves the image to the right if the number is positive, or to the left if the number is negative. The second value, respectively, moves the image up for a positive number or down for a negative.
As you can see, I divided the circle with the tree into two parts, and left the car unchanged.
Such a positioning of a picture with a tree texture may seem strange, but it is necessary to get an animation effect.
Now that we can operate on background images independently of each other, we can get an interesting effect due to the property
To do this, do not forget to specify prefixes for browsers, set the animation time to 1 second. Then, due to the property
Along with this, we implemented the first example. When you hover the mouse, the doors will open in different directions and we will see the car.
Now that we’ve looked at the first example, making this one will be easier. Here we use the same properties
Let's take it one step further and use already 5 images for animation. We need that, when you hover over the image, it is divided into 4 parts and the picture with the machine is displayed.
We build 4 parts of the image so that they are vertically and horizontally directly in the center of the circle. When hovering, they will move to the center.
It will be a little more difficult to repeat the same effect with a rounded separation, since firstly, you need to use a transparent image, and secondly, you need to make sure that they overlap each other in the designated place. This may cause problems due to the use of wood texture. But if you use a simpler texture with noise, there should be no problems.
You can understand the essence of this example from the picture above. In this example, I made the machine turn before the parts of the image with the texture are opened.
This includes a few nuances. The problem is that all background images are rotated, including the image of the machine below them. Given this, I turned the car in the opposite direction in advance so that when turning it would return to the desired position.
Another interesting thing is the time during which the animation takes place. Please note that for the rotation effect and the movement effect, I indicated different times. Thanks to this, an incredibly large number of examples can be made.
Add-on from psywalker
The original article was published in November 2011. A message about canceling prefixes for many CSS properties, including transition and transform, appeared in IE10 after its release. Therefore, we left the author’s version of the code in the article, but for practical tasks, keep in mind that the -ms- prefix is for the most popular CSS3 properties - such as transition, transform, animation, linear-gradient, etc. - no longer needed.
hoverand properties transition. Below are five different examples you can use to create your own amazing effects.
What should happen
Let's look at what should turn out in the end. Think about how you can implement these effects purely on one CSS.
Demonstration
Multiple backgrounds (multifon)
Until recently, I did not use several images as a background. I knew that such an opportunity existed, but could not find her an interesting application. The parallax option is certainly interesting, but everyone is already tired.
In the end, I came up with the concept of using a multi-phone when hovering over an object. It turned out a kind of animation. This is a very simple trick, but I haven’t seen it anywhere before, so I decided to show you how to use it.
In fact, you can come up with a million different examples, but we will consider only five to understand the essence of the effect.
Concept
Basically, when you hover over objects, normal animation happens. For example, one image overlaps another, something rotates or bounces, the color fades, and so on.
When using the multi-phone, many animation options appear. Without much effort, you can create, at first glance, a complex animation using only the CSS property
transitionthat browsers currently support better than the property animate. Suppose we want to make an animation of the opening doors. To do this, just do the offset of the two background images in different directions:
Now we have an idea of the future work. So let's move on to the fun part - let's start creating effects.
Animation of horizontally opening doors
Let's try to create the effect described in the previous figure. To get started, we need two background images.
Since we consider only the idea itself, it does not matter which images we use. I took a dark wood texture and a car icon from a free font .
Basic markup
Create a block
divwith a class on the page circles. This class also applies to the rest of the examples. All examples will be located on one page, so I added styles to position the elements. But the most important thing is the use of the property
border-radiusto create the shape of a circle..circles {
float: left;
height: 200px; width: 200px;
background-color: #eee;
margin: 050px50px0;
/*Задаем форму круга*/-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
Our background images will be placed in one row, here they are shown with the use of fillet.
Apply multifon
First, use two images as the background. Next, we use the trick, which is that the texture of the tree must be used twice. The result is three images.
In CSS, several images are defined quite simply, just list them with a comma.
#slidingDoors {
/*Применяем несколько фоновых рисунков*/background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
}
The arrangement is logical: the first image will be at the top, the last will be at the bottom, that is, it will overlap with all the other images.
In the property,
backgroundyou can specify both the path of the images and their positioning. But for a better perception, we will set these attributes separately, that is, we will use the property to indicate the position background-position./*Применяем несколько фоновых рисунков*/#slidingDoors {
background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
background-repeat: no-repeat;
/*Задаем их положение*/background-position: -100px0px, 100px0px, 0px0px;
}
Obviously, given groups of values correspond to given images. The first value in each group moves the image to the right if the number is positive, or to the left if the number is negative. The second value, respectively, moves the image up for a positive number or down for a negative.
As you can see, I divided the circle with the tree into two parts, and left the car unchanged.
Such a positioning of a picture with a tree texture may seem strange, but it is necessary to get an animation effect.
Animating Images
Now that we can operate on background images independently of each other, we can get an interesting effect due to the property
transition. To do this, do not forget to specify prefixes for browsers, set the animation time to 1 second. Then, due to the property
hover, we move one part of the texture to the left, and the other part to the right.#slidingDoors {
/*Применяем несколько фоновых рисунков*/background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
background-repeat: no-repeat;
/*Задаем их положение*/background-position: -100px0px, 100px0px, 0px0px;
/*Параметры анимации*/-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#slidingDoors:hover {
background-position: -200px0px, 200px0px, 0px0px;
}
Along with this, we implemented the first example. When you hover the mouse, the doors will open in different directions and we will see the car.
Animation of vertically opening doors
Now that we’ve looked at the first example, making this one will be easier. Here we use the same properties
transitionand background-image. We only change the position of the parts of the texture. This time, when hovering, they will open vertically.#slidingDoorsVert {
/*Применяем несколько фоновых рисунков*/background-image: url('wood.jpg'), url('wood.jpg'), url('car.jpg');
background-repeat: no-repeat;
/*Задаем их положение*/background-position: 0px -100px, 0px100px, 0px0px;
/*Параметры анимации*/-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
#slidingDoorsVert:hover {
background-position: 0px -200px, 0px200px, 0px0px;
}
Square separation of parts
Let's take it one step further and use already 5 images for animation. We need that, when you hover over the image, it is divided into 4 parts and the picture with the machine is displayed.
We build 4 parts of the image so that they are vertically and horizontally directly in the center of the circle. When hovering, they will move to the center.
#breakApart {
background-image: url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('squares.jpg'), url('car.jpg');
background-repeat: no-repeat;
background-position: -100px -100px, 100px100px, -100px100px, 100px -100px, 0px0px;
/*Параметры анимации*/-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#breakApart:hover {
background-position: -200px -200px, 200px200px, -200px200px, 200px -200px, 0px0px;
}
Round separation of parts
It will be a little more difficult to repeat the same effect with a rounded separation, since firstly, you need to use a transparent image, and secondly, you need to make sure that they overlap each other in the designated place. This may cause problems due to the use of wood texture. But if you use a simpler texture with noise, there should be no problems.
Rotation and separation
You can understand the essence of this example from the picture above. In this example, I made the machine turn before the parts of the image with the texture are opened.
This includes a few nuances. The problem is that all background images are rotated, including the image of the machine below them. Given this, I turned the car in the opposite direction in advance so that when turning it would return to the desired position.
Another interesting thing is the time during which the animation takes place. Please note that for the rotation effect and the movement effect, I indicated different times. Thanks to this, an incredibly large number of examples can be made.
#twistAndShout {
background-image: url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('crisscross.jpg'), url('car.jpg');
background-repeat: no-repeat;
background-position: -100px -100px, 100px100px, -100px100px, 100px -100px, 0px0px;
/* Поворот */-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
/*Параметры анимации*/-webkit-transition: background-position .6s ease-in-out, -webkit-transform .3s ease;
-moz-transition: background-position .6s ease-in-out, -moz-transform .3s ease;
-o-transition: background-position .6s ease-in-out, -o-transform .3s ease;
-ms-transition: background-position .6s ease-in-out, -ms-transform .3s ease;
transition: background-position .6s ease-in-out, transform .3s ease;
}
#twistAndShout:hover {
background-position: -200px -200px, 200px200px, -200px200px, 200px -200px, 0px0px;
/*Поворот*/-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}
Add-on from psywalker
The original article was published in November 2011. A message about canceling prefixes for many CSS properties, including transition and transform, appeared in IE10 after its release. Therefore, we left the author’s version of the code in the article, but for practical tasks, keep in mind that the -ms- prefix is for the most popular CSS3 properties - such as transition, transform, animation, linear-gradient, etc. - no longer needed.