CSS3 hover effects. Step by step tutorial
When creating this manual, my goal was to take three dozens of different effects, partly - quite common, partly - invented by me, place them from simple to more complex, and use their example to show beginners who have never had a CSS3 experience. work and how to put them into practice. It is for this reason that the article came out detailed, step by step, it was important for me to describe and analyze every detail.
Demo materials are here .
Warning: effects work only in modern browsers that support the features of CSS3.
')
Preparation for work.
So, in order to create our effects, we need such a simple default html structure :
For most of the effects, it will remain unchanged, but in some places we will have to make a number of changes. We have a div container with the class .effect, inside of which we put a picture and a container with the class .caption containing the title, description and, as in this case, the “View More” button. Of course, the structure can be changed, the main thing is, then make the appropriate changes for the CSS code.
Default css-styles for our structure (again, depending on how we consider the effect, they will differ):
Example
The effect # 1.1 is that when you hover the mouse over the image, the .caption container with information “leaves” on top.
In order to achieve this, it is necessary, first of all, to move this container higher, beyond the limits of the container with the effect. To do this, we will change the top property for it, and the styles for the block will now look like this:
The next step is to add the transition property to the .caption. The transition shows exactly which property will change, how quickly, with what delay.
Consider it in more detail. This is how the transition property for effect # 1.1 should look like:
transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s;
The first value sets the name of the style property to be tracked for change. In this case, we set all - all properties will be tracked. The second is responsible for the time required for the animation. The third is for how the transition speed will be distributed over the time specified by the second property: where it will slow down, where it will accelerate. For example, in this case, first, the animation will be faster, slow down to the middle and come out at a uniform speed towards the end. The fourth value determines whether the animation will start with a delay or not. If the value is 0s, there is no delay.
In addition, for this property, we will need to add vendor prefixes. necessary for correct animation display in browsers. What it looks like:
-webkit-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Chrome and Safari
-o-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Opera
-ms-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for IE
-moz-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Firefox
Add them too:
In the article, for brevity, I will omit the prefixes, but do not forget to add them for properties such as transition, transform and transform-origin. In the example code below the CSS button (or in the files themselves) there are prefixes too.
So, we have added almost everything that is needed to create the effect: the initial conditions and conditions for the transition to the end point, it remains to add only the styles for the end point itself.
Effect # 1.2 is constructed in the same way, only .caption “leaves” from right to left. To do this, we make minor changes to the .caption styles:
But in the effect of # 1.3 minor complications are introduced. So .caption is moving, as in effect # 1.1, from top to bottom, but at the same time another block is being pushed upwards to meet it.
To achieve this effect, we make changes to the html-structure. We need to create an empty div container with the class .overlay for the block going upwards:
Make changes to the styles for .caption. Change its position to extend from top to bottom, halve the transparency to keep the final background transparency value (eventually, we will have two blocks superimposed on each other), add a z-index to show which of the two blocks will be “higher” when applying:
Add styles for .overlay.
It remains only to determine the end point of the transformations: .caption drops to top: 0px, and .overlay, on the contrary, rises to the same value:
Example
In the effect of # 2.1 elements are pushed from the center to the edges. We will use the basic html structure, in which, to create this effect, no changes will be required.
But in the css-styles you need to make changes. First of all, it is necessary to shift the title and the button to the center of the .caption to set the starting point for the next transition. In addition, you need to add the transition property to these elements, because now they are the objects of animation:
Now, if we set the end point of the animation:
we get not the most beautiful result. The translucent substrate has not disappeared anywhere, the elements are heaped in the center and unesthetically disperse from there. Since, with the help of transition, you can change not only the position of the element, but also, for example, its transparency, thanks to it we will be able to hide both the substrate and the elements in the center until they need to be moved.
Add transparency and transition to .caption:
Thus, now .caption we hide, and a little later we will adjust so that it appears only when you hover the mouse. It is necessary to add transparency for all elements inside .caption, and the code for them will look like this:
Now on hover the following will occur: the transparency of the .caption and the elements inside it will change from opacity: 0 to opacity: 1, at the same time the position of the header and the button will change:
Effects # 2.2 and # 2.3 are constructed in the same way, only for effect # 2.2, we shift the heading and the button from top to bottom and bottom to up, respectively, and for effect # 2.3, right to left and left to right, respectively.
Changes that need to be made to effect code # 2.1 to get effect # 2.2 :
Otherwise, everything remains the same.
Well, in order to get the effect # 2.3 from the effect # 2.1, change the following:
Example
Effect # 3.1 builds on the fact that, when hovering, very increased <h4>, <p> and <a> elements appear, gradually decreasing to normal size.
The html structure is left basic. Regarding the changes in the stylesheet, we need to add the transform property to the descending elements. Transform allows you to transform elements: rotate, resize them, tilt, move, combine several properties to create more complex effects. For these effects, we will analyze the decrease / increase of elements.
The value of the transform property, necessary for such a transformation, is scale (x, y), where the value of x is the horizontal resizing of the object and y is the vertical, respectively. If we apply this property for <h4>, <p> and <a>, we get this:
As you can see, the scale value in this case is not two parameters, but one, and this means that both horizontally and vertically our element is doubled.
Now on hover, our task is to reduce these elements to their normal size, which we do by adding these styles:
As for .caption, as well as in the analysis of effects # 2.1- # 2.3, we expose him opacity: 0 and a very short transition time so that the appearance of the substrate does not distract the viewer from the main animation:
Effect # 3.2 is constructed similarly to the previous one, with the only exception that the elements do not decrease, but increase when the mouse is moved. Set a scale: 0.25 for them, all other styles remain the same.
But effect # 3.3 is a combination of moving elements and changing their sizes. As you can see, the <p> element remains in its place and the size does not change, for it styles remain standard. As for <h4> and <a>, our task is to move them up and down, respectively, and reduce in size:
Now you need to set the transition, but this raises the question: the elements must first fall and only after that they increase in size, that is, you need to specify a transition to lower the elements without delay and a transition with a delay to increase.
To set more than one style property for transition is simple: we just list them separated by commas, not forgetting to specify all the parameters for each property:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Add this rule to the rest of the style rules:
Set the end point of the transformations:
It remains only to hide the .caption in the image and likeness of the two previous effects:
Example
To “twist” the elements, the transform property must be set to the value — rotate and its parameters. What parameters does the rotate value have? First, the axis of rotation: X, Y or Z. Secondly, the number of degrees by which the element will be rotated. So, for example, if we want to rotate an element along the Y axis by 30 degrees, the rule would look like this:
transform: rotateY (30deg);
Effects # 4.1- # 4.3 are built on the rotation of the .caption element around each of the three axes, and we start with the effect # 4.1 , in which .caption rotates around the X axis. But the rotation itself is not so spectacular, so we will combine with resizing element.
The html structure remains the base, as well as the styles for the <h4>, <p> and <a> elements. Only styles for .caption will change, and, first of all, we will add a new transform:
Now, when you hover the mouse, the element spins by the number of degrees indicated above But I would like it not only to spin, but, in the absence of a hover, disappear, and on the hover it would not only spin, but “float up”. To do this, add another transform with the scale value. To add two or more transform values ​​to the element, you do not need to write the rule twice, we just put these values ​​separated by spaces. And do the same with hover-styles:
Now .caption not only rotates around the axis, but also appears from the depth of the picture.
Effect # 4.2 is constructed in a completely similar way, only replacing the axis of rotation with Y.
Effect # 4.3 is built, again, completely the same. Since rotateZ () is completely analogous to the rotate () record, we simply change the styles to:
Effect # 4.4 is harder. It is based not only on rotation and resizing, but also on changing the coordinates of the point around which the rotation takes place, as well as on the complicated value of the transition-timing-function parameter of the transition property. But let's start in order.
The point is that the rotation can not be by itself, it always occurs relative to a point. The default coordinates of this point are the center, that is, 50% 50%, but now we will change them to change the trajectory of our .caption. The coordinates are set by the transform-origin property. Also, let's add a transition with the value of the transition-timing-function parameter - linear:
Now the effect looks like a very slow rotation of the .caption around the Z axis relative to a very displaced rotation point. To complicate the effect, let's change the transition-timing-function value to cubic-bezier (0.68, -0.55, 0.27, 1.55), which will give us a very accelerated exit to the animation, a slower middle and a small return back at the end. This is what the final code will look like:
Example
As I already wrote in the analysis of effects # 3.1- # 3.3, we can apply the scale not only along two axes at the same time, increasing / decreasing the element at the same time in length and width, but also along the same axis. So, for example, in the effect # 5.1, we see how .caption is rotated from the center horizontally, but its height does not change.
For this element, the html structure and styles for <h4>, <p>, and <a> remain basic. Only styles for .caption will change, which we need to reduce only along the X axis:
And so that there is an increase, on hover:
Effect # 5.2 is constructed in the same way, only .caption will unfold along the Y axis, otherwise the styles will remain similar to the previous one.
In the effect of # 5.3 .caption also turns horizontally, but not from the center, but from the left edge. To move the point from which the transition occurs, apply the transform-origin, which, as we see, works not only in conjunction with rotate:
Thus, we shift the point from which the transition occurs, horizontally to the extreme left position, and vertically it remains in the default position - in the center. Other styles remain the same.
Effect # 5.4 is similar to effect # 5.3, here .caption takes place from top to bottom, from the top edge:
The point is shifted to the extreme upper position, horizontally the same - remains in the center. Other styles are similar.
Example
In the # 6.1 effect, when you hover the mouse, the .caption rotates as if it were attached to an invisible stud. The role of the carnation is performed by the transform-origin with the given coordinates, and the rotation is provided by the rotate.
The html structure remains basic, as well as the styles for <h4>, <p>, and <a>. We change only styles for .caption. Let's first add rotate:
Now .caption is simply turned upside down. Let him hover back to the starting position:
Now, when you hover the mouse, .caption simply scrolls around its axis. But, if we change the coordinates of the point around which the transition takes place, and, as in this case, move it up vertically this way:
The following will turn out: .caption will move upward, as if we gave it top: -100%; because the point about which it rotates has shifted.
Now, if we shift the coordinates of the “transition point” and change the direction of rotation, we can get different variations of this effect. So, for example, the effect # 6.2 is almost completely similar to the previous one, only transform-origin: center bottom; and the direction of rotation is reversed due to the fact that the initial value has become such a transform: rotate (-180deg);
In effect # 6.3, the direction of rotation remains the same as in # 6.2, and the “transition point” is shifted to the middle of the right side of the container: transform-origin: right center; Otherwise, the styles remain the same.
Example
Now we will slightly disturb the order of parsing the effects and start with the effect # 7.2, then move on to # 7.3, and only then return to # 7.1 as the hardest part of the line.
So, the effect of # 7.2 : when hovering the mouse, two .overlay containers leave above and below, and when they close, the .caption leaves above.
The html structure will need this:
As you can see, we have added two .overlay-layers, the very ones that will go above and below.
As for the styles: for <h4>, <p> and <a> styles remain default.
Now let's look at the styles for .overlay containers:
.overlay-top we removed up, .overlay-bottom - respectively, down, now we need to move them when you hover the mouse. Since each of them has a height equal to 50% of the height of the parent, to do it is simple:
Now we define the type and behavior of .caption, which we also go down from above, which means it should be placed on top. Now, since .caption appears after .overlay, it would be logical that it will have the value of the delay parameter of the transition property:
Let's check how it works. What is the result of the steps:
It turns out that the delay defined for .caption works, but not with the result that we would like. What can be done here?
We can set the delay not only in the styles of the element itself, but also in the styles of its behavior on hover, and this will be our trick. How should the elements behave on the hover? First .overlay leaves, and only then .caption, which means that in the hover state, .overlay has a delay of 0s, and in .caption, for example, 0.3s
But, when we remove the hover, the elements return to their normal behavior, in which first, without any delay, the .caption returns to the place, and then the .overlay, and, therefore, we must cancel the delay in the first, and add the second:
Now the sequence will be respected, and the elements will move in the correct order.
Effect # 7.3 is almost the same as the previous one, the only difference is in the styles for .overlay:
With the effect of # 7.1 will have to tinker a little longer. Like # 7.3, it differs from # 7.2 only in the position and styles for .overlay, with two triangles going to the top right and bottom to the left.
But, of course, we will not have triangles, but rectangles. Here are common styles for both .overlay:
This is important: the width and height of the rectangles should be individually adjusted to the size of your container with the effect, as well as the coordinates to which we place them (and to which we later move). What we do: take our rectangles, expand by 33 degrees each, shift the top to the upper right corner of the container .effect, lower to the lower left, respectively, and on the hover we shift them to contact along the diagonal line of the container rectangle .effect:
Other styles are identical to the styles of previous effects.
# 8.1- # 8.3
Example
The highlight of these effects is the bounce effect, which is built on the value of the transition-timing-function property of the transition for .overlay.
The html structure is:
In this case, .overlay will need only one. These are the styles needed for it:
Well, on hover we increase it:
So that .caption is not distracting, all that we prescribe for it is a change in transparency:
Other styles remain default.
The effects of # 8.2- # 8.3 are similar. The only difference is that in # 8.2 scaleX () is used, and in # 8.3 - scaleY (), which I described in detail when parsing effects # 3.1- # 3.3
# 9.1- # 9.3
Example
Effect # 9.1 is based on the fact that two .overlays appear in turn from the center, and after them with a small bounce-effect .caption leaves.
As for the html structure, it is as follows:
The styles for <h4>, <p> and <a> remain unchanged. Consider styles for .overlay:
Since .overlay-1 and .overlay-2 enter at different times, the transition will be given to everyone - their own:
Accordingly, when removing the hover, they disappear with a delay relative to each other. Therefore, for .overlay-1 we set delay: 0s, and for .overlay-2 - delay: 0.2s (I wrote more about the effect of the delay on the order of appearance and disappearance of elements when parsing effects # 7.1- # 7.3)
It remains to consider the styles.
Effect # 9.2 is similar, only .overlay is round and .caption, like .overlay, comes from the center:
Other styles are similar to effect styles. # 9.1.
Effect # 9.3 is constructed as follows. This html structure is needed:
To achieve this look for .overlay, we will give it a gradually increasing box-shadow:
The initial position for .caption will be: a 180-degree turn and opacity: 0. On the hover, expand the .caption, which, in the process of turning, becomes opaque:
All other styles are default.
# 10.1- # 10.3
Example
Effect # 10.1 consists of five steps that change the size of the .overlay elements and, as if emerging, .caption.
The html structure needs this:
First, build a “ladder”. Each .overlay differs from another in its location and value of the delay parameter:
On hover, their delay will also vary:
The most interesting and difficult here is .caption. Here are the basic styles for it:
Now we need to give it a position before the start of the animation. First, deploy, because when we hover the mouse, we see how .caption rotates at a certain angle. Let's set also transform-origin, defining a point around which transformation will take place. Add transform: rotate (-50deg); and transform-origin: 0% 100%; .The next step will be an offset vertically and horizontally to provide a “dive” a little later. We will shift using transform: translate (x, y), which shifts the element along the X and Y axis, respectively. Our task is to move the .caption almost to the very angle horizontally and about two-thirds beyond the limits of the .effects container vertically:
.caption , . height: 0px; overflow: hidden; . :
, .caption hover, , rotate(0deg) :
<h4>, <p> <a> .
#10.2 .overlay, , “” <h4>, <p> <a>.
html- :
.overlay, :
More interesting with the lower right. Since the width of the border is 4px, simply setting the width and height to 100% is not enough, you need to compensate 8px vertically and horizontally, which will help calc:
We now turn to .caption and its contents. For .caption, the styles remain defaulted; they will change for the <h4>, <p> and <a> relocatable elements, each of which needs to be shifted to the top. To prevent the header from underlaying on the border with an underscore, let's calculate the width, like .overlay-2:
It only remains for the elements to descend on the hover, and in the order we set:
Effect # 10.3 consists of an increasing image and a change in the rotation angle of the .caption on the hover.
The html structure needs a default, as well as the styles for <h4>, <p> and <a>. And we begin with increasing the picture:
.caption — , , 30 , . transition, :
, !
Demo materials are here .
Warning: effects work only in modern browsers that support the features of CSS3.
')
Preparation for work.
So, in order to create our effects, we need such a simple default html structure :
<div class="effect> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> For most of the effects, it will remain unchanged, but in some places we will have to make a number of changes. We have a div container with the class .effect, inside of which we put a picture and a container with the class .caption containing the title, description and, as in this case, the “View More” button. Of course, the structure can be changed, the main thing is, then make the appropriate changes for the CSS code.
Default css-styles for our structure (again, depending on how we consider the effect, they will differ):
.effect { position: relative; width: 300px; height: 200px; overflow: hidden; } .effect img { width: 100%; height: 100%; } .effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; } .effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; } Basics of the transition property. Effects # 1.1-1.3
Example
The effect # 1.1 is that when you hover the mouse over the image, the .caption container with information “leaves” on top.
In order to achieve this, it is necessary, first of all, to move this container higher, beyond the limits of the container with the effect. To do this, we will change the top property for it, and the styles for the block will now look like this:
.effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; } The next step is to add the transition property to the .caption. The transition shows exactly which property will change, how quickly, with what delay.
Consider it in more detail. This is how the transition property for effect # 1.1 should look like:
transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s;
The first value sets the name of the style property to be tracked for change. In this case, we set all - all properties will be tracked. The second is responsible for the time required for the animation. The third is for how the transition speed will be distributed over the time specified by the second property: where it will slow down, where it will accelerate. For example, in this case, first, the animation will be faster, slow down to the middle and come out at a uniform speed towards the end. The fourth value determines whether the animation will start with a delay or not. If the value is 0s, there is no delay.
In addition, for this property, we will need to add vendor prefixes. necessary for correct animation display in browsers. What it looks like:
-webkit-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Chrome and Safari
-o-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Opera
-ms-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for IE
-moz-transition: all 0.3s cubic-bezier (0.4, 0, 1, 1) 0s; - for Firefox
Add them too:
.effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; } In the article, for brevity, I will omit the prefixes, but do not forget to add them for properties such as transition, transform and transform-origin. In the example code below the CSS button (or in the files themselves) there are prefixes too.
So, we have added almost everything that is needed to create the effect: the initial conditions and conditions for the transition to the end point, it remains to add only the styles for the end point itself.
.effect:hover .caption { top: 0px; } Effect # 1.2 is constructed in the same way, only .caption “leaves” from right to left. To do this, we make minor changes to the .caption styles:
.effect .caption { position: absolute; top: 0px; left: 100%; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -o-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -ms-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; -moz-transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; } .effect:hover .caption { left: 0px; } But in the effect of # 1.3 minor complications are introduced. So .caption is moving, as in effect # 1.1, from top to bottom, but at the same time another block is being pushed upwards to meet it.
To achieve this effect, we make changes to the html-structure. We need to create an empty div container with the class .overlay for the block going upwards:
<div class="effect> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> <div class="overlay"></div> </div> Make changes to the styles for .caption. Change its position to extend from top to bottom, halve the transparency to keep the final background transparency value (eventually, we will have two blocks superimposed on each other), add a z-index to show which of the two blocks will be “higher” when applying:
effect .caption { position: absolute; top: -100%; left: 0px; background: rgba(0,0,0,0.35); width: 100%; height: 100%; color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; z-index: 10; } Add styles for .overlay.
.effect .overlay { position: absolute; top: 100%; left: 0px; background: rgba(0,0,0,0.35); width: 100%; height: 100%; transition: all 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; z-index: 5; } It remains only to determine the end point of the transformations: .caption drops to top: 0px, and .overlay, on the contrary, rises to the same value:
.effect:hover .caption, .effect:hover .overlay { top: 0px; } Change the transparency. Add the movement of individual elements. Effects # 2.1- # 2.3
Example
In the effect of # 2.1 elements are pushed from the center to the edges. We will use the basic html structure, in which, to create this effect, no changes will be required.
But in the css-styles you need to make changes. First of all, it is necessary to shift the title and the button to the center of the .caption to set the starting point for the next transition. In addition, you need to add the transition property to these elements, because now they are the objects of animation:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -58px; transition: all 0.3s linear 0s; } Now, if we set the end point of the animation:
.effect:hover h4, .effect:hover a.btn { top: 0px; } we get not the most beautiful result. The translucent substrate has not disappeared anywhere, the elements are heaped in the center and unesthetically disperse from there. Since, with the help of transition, you can change not only the position of the element, but also, for example, its transparency, thanks to it we will be able to hide both the substrate and the elements in the center until they need to be moved.
Add transparency and transition to .caption:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.5s linear 0s; } Thus, now .caption we hide, and a little later we will adjust so that it appears only when you hover the mouse. It is necessary to add transparency for all elements inside .caption, and the code for them will look like this:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: 62px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -58px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; opacity: 0; transition: all 0.3s linear 0s; } Now on hover the following will occur: the transparency of the .caption and the elements inside it will change from opacity: 0 to opacity: 1, at the same time the position of the header and the button will change:
.effect:hover h4, .effect:hover a.btn { top: 0px; opacity: 1; } .effect:hover .caption, .effect:hover p { opacity: 1; } Effects # 2.2 and # 2.3 are constructed in the same way, only for effect # 2.2, we shift the heading and the button from top to bottom and bottom to up, respectively, and for effect # 2.3, right to left and left to right, respectively.
Changes that need to be made to effect code # 2.1 to get effect # 2.2 :
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -66px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 66px; opacity: 0; transition: all 0.3s linear 0s; } Otherwise, everything remains the same.
Well, in order to get the effect # 2.3 from the effect # 2.1, change the following:
font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; left: 300px; opacity: 0; transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; left: -300px; opacity: 0; transition: all 0.3s linear 0s; } .effect:hover h4, .eff-2-3:hover a.btn { left: 0px; opacity: 1; } Let's talk about the transform and the increase / decrease elements. Effects # 3.1- # 3.3
Example
Effect # 3.1 builds on the fact that, when hovering, very increased <h4>, <p> and <a> elements appear, gradually decreasing to normal size.
The html structure is left basic. Regarding the changes in the stylesheet, we need to add the transform property to the descending elements. Transform allows you to transform elements: rotate, resize them, tilt, move, combine several properties to create more complex effects. For these effects, we will analyze the decrease / increase of elements.
The value of the transform property, necessary for such a transformation, is scale (x, y), where the value of x is the horizontal resizing of the object and y is the vertical, respectively. If we apply this property for <h4>, <p> and <a>, we get this:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; transform: scale(2); transition: all 0.3s linear 0s; } As you can see, the scale value in this case is not two parameters, but one, and this means that both horizontally and vertically our element is doubled.
.effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; transform: scale(2); transition: all 0.3s linear 0s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; transform: scale(2); transition: all 0.3s linear 0s; } Now on hover, our task is to reduce these elements to their normal size, which we do by adding these styles:
.effect:hover .caption h4, .effect:hover .caption p, .effect:hover .caption a.btn { transform: scale(1); } As for .caption, as well as in the analysis of effects # 2.1- # 2.3, we expose him opacity: 0 and a very short transition time so that the appearance of the substrate does not distract the viewer from the main animation:
.effect .caption { position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; } .effect:hover .caption { opacity: 1; } Effect # 3.2 is constructed similarly to the previous one, with the only exception that the elements do not decrease, but increase when the mouse is moved. Set a scale: 0.25 for them, all other styles remain the same.
But effect # 3.3 is a combination of moving elements and changing their sizes. As you can see, the <p> element remains in its place and the size does not change, for it styles remain standard. As for <h4> and <a>, our task is to move them up and down, respectively, and reduce in size:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 100%; transform: scale(0.25); } Now you need to set the transition, but this raises the question: the elements must first fall and only after that they increase in size, that is, you need to specify a transition to lower the elements without delay and a transition with a delay to increase.
To set more than one style property for transition is simple: we just list them separated by commas, not forgetting to specify all the parameters for each property:
transition: top 0.3s linear 0s, transform 0.3s linear 0.3s;
Add this rule to the rest of the style rules:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin-top: 20px; position: relative; top: -100%; transform: scale(0.25); transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: 100%; transform: scale(0.25); transition: top 0.3s linear 0s, transform 0.3s linear 0.3s; } Set the end point of the transformations:
.effect:hover .caption h4, .effect:hover .caption a.btn { transform: scale(1); top: 0px; } It remains only to hide the .caption in the image and likeness of the two previous effects:
.effect .caption { position: absolute; top: 0; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.3s linear 0s; } .effect:hover .caption { opacity: 1; } Twist the elements: rotate. Set the “rotation point”. Effects # 4.1- # 4.4
Example
To “twist” the elements, the transform property must be set to the value — rotate and its parameters. What parameters does the rotate value have? First, the axis of rotation: X, Y or Z. Secondly, the number of degrees by which the element will be rotated. So, for example, if we want to rotate an element along the Y axis by 30 degrees, the rule would look like this:
transform: rotateY (30deg);
Effects # 4.1- # 4.3 are built on the rotation of the .caption element around each of the three axes, and we start with the effect # 4.1 , in which .caption rotates around the X axis. But the rotation itself is not so spectacular, so we will combine with resizing element.
The html structure remains the base, as well as the styles for the <h4>, <p> and <a> elements. Only styles for .caption will change, and, first of all, we will add a new transform:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotateX(360deg); } Now, when you hover the mouse, the element spins by the number of degrees indicated above But I would like it not only to spin, but, in the absence of a hover, disappear, and on the hover it would not only spin, but “float up”. To do this, add another transform with the scale value. To add two or more transform values ​​to the element, you do not need to write the rule twice, we just put these values ​​separated by spaces. And do the same with hover-styles:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotateX(0deg) scale(0); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotateX(360deg) scale(1); } Now .caption not only rotates around the axis, but also appears from the depth of the picture.
Effect # 4.2 is constructed in a completely similar way, only replacing the axis of rotation with Y.
Effect # 4.3 is built, again, completely the same. Since rotateZ () is completely analogous to the rotate () record, we simply change the styles to:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 0.4s linear 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); } Effect # 4.4 is harder. It is based not only on rotation and resizing, but also on changing the coordinates of the point around which the rotation takes place, as well as on the complicated value of the transition-timing-function parameter of the transition property. But let's start in order.
The point is that the rotation can not be by itself, it always occurs relative to a point. The default coordinates of this point are the center, that is, 50% 50%, but now we will change them to change the trajectory of our .caption. The coordinates are set by the transform-origin property. Also, let's add a transition with the value of the transition-timing-function parameter - linear:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s linear 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); transform-origin: -10% -20%; } Now the effect looks like a very slow rotation of the .caption around the Z axis relative to a very displaced rotation point. To complicate the effect, let's change the transition-timing-function value to cubic-bezier (0.68, -0.55, 0.27, 1.55), which will give us a very accelerated exit to the animation, a slower middle and a small return back at the end. This is what the final code will look like:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(0deg) scale(0); transition: all 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; } .effect:hover .caption { transform: rotate(360deg) scale(1); transform-origin: -10% -20%; } A little more about scale and transform-origin. Effects # 5.1- # 5.4
Example
As I already wrote in the analysis of effects # 3.1- # 3.3, we can apply the scale not only along two axes at the same time, increasing / decreasing the element at the same time in length and width, but also along the same axis. So, for example, in the effect # 5.1, we see how .caption is rotated from the center horizontally, but its height does not change.
For this element, the html structure and styles for <h4>, <p>, and <a> remain basic. Only styles for .caption will change, which we need to reduce only along the X axis:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transition: all 0.4s linear 0s; } And so that there is an increase, on hover:
.effect:hover .caption { transform: scaleX(1); } Effect # 5.2 is constructed in the same way, only .caption will unfold along the Y axis, otherwise the styles will remain similar to the previous one.
In the effect of # 5.3 .caption also turns horizontally, but not from the center, but from the left edge. To move the point from which the transition occurs, apply the transform-origin, which, as we see, works not only in conjunction with rotate:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transform-origin: left center; transition: all 0.4s linear 0s; } Thus, we shift the point from which the transition occurs, horizontally to the extreme left position, and vertically it remains in the default position - in the center. Other styles remain the same.
Effect # 5.4 is similar to effect # 5.3, here .caption takes place from top to bottom, from the top edge:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: scaleX(0); transform-origin: center top; transition: all 0.4s linear 0s; } The point is shifted to the extreme upper position, horizontally the same - remains in the center. Other styles are similar.
How else can you use a bunch of rotate and transform-origin. Effects # 6.1- # 6.3
Example
In the # 6.1 effect, when you hover the mouse, the .caption rotates as if it were attached to an invisible stud. The role of the carnation is performed by the transform-origin with the given coordinates, and the rotation is provided by the rotate.
The html structure remains basic, as well as the styles for <h4>, <p>, and <a>. We change only styles for .caption. Let's first add rotate:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(180deg); transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } Now .caption is simply turned upside down. Let him hover back to the starting position:
.effect:hover .caption { transform: rotate(0deg); } Now, when you hover the mouse, .caption simply scrolls around its axis. But, if we change the coordinates of the point around which the transition takes place, and, as in this case, move it up vertically this way:
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; transform: rotate(180deg); transform-origin: center top; transition: all 0.4s cubic-bezier(0.4, 0, 1, 1) 0s; } The following will turn out: .caption will move upward, as if we gave it top: -100%; because the point about which it rotates has shifted.
Now, if we shift the coordinates of the “transition point” and change the direction of rotation, we can get different variations of this effect. So, for example, the effect # 6.2 is almost completely similar to the previous one, only transform-origin: center bottom; and the direction of rotation is reversed due to the fact that the initial value has become such a transform: rotate (-180deg);
In effect # 6.3, the direction of rotation remains the same as in # 6.2, and the “transition point” is shifted to the middle of the right side of the container: transform-origin: right center; Otherwise, the styles remain the same.
Let's talk more about delay. Effects # 7.1- # 7.3
Example
Now we will slightly disturb the order of parsing the effects and start with the effect # 7.2, then move on to # 7.3, and only then return to # 7.1 as the hardest part of the line.
So, the effect of # 7.2 : when hovering the mouse, two .overlay containers leave above and below, and when they close, the .caption leaves above.
The html structure will need this:
<div class="effect"> <img src="img/ef7.jpg" alt="Effect #7" /> <div class="overlay overlay-top"></div> <div class="overlay overlay-bottom"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> As you can see, we have added two .overlay-layers, the very ones that will go above and below.
As for the styles: for <h4>, <p> and <a> styles remain default.
Now let's look at the styles for .overlay containers:
.effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 50%; left: 0px; position: absolute; transition: all 0.15s linear 0s; } .effect .overlay-top { top: -100%; } .effect .overlay-bottom { top: 100%; } .overlay-top we removed up, .overlay-bottom - respectively, down, now we need to move them when you hover the mouse. Since each of them has a height equal to 50% of the height of the parent, to do it is simple:
.effect:hover .overlay-top { top: 0px; } .effect:hover .overlay-bottom { top: 50%; } Now we define the type and behavior of .caption, which we also go down from above, which means it should be placed on top. Now, since .caption appears after .overlay, it would be logical that it will have the value of the delay parameter of the transition property:
.effect .caption { position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0.3s; } .effect:hover .caption { top: 0px; } Let's check how it works. What is the result of the steps:
- Hover the mouse over .effect
- Check Out .overlay
- .Caption appears
- Remove hover
- .overlay return to their seats
- .caption, due to the delay value set, returns to the site 0.3s later, which was not at all in our plans
It turns out that the delay defined for .caption works, but not with the result that we would like. What can be done here?
We can set the delay not only in the styles of the element itself, but also in the styles of its behavior on hover, and this will be our trick. How should the elements behave on the hover? First .overlay leaves, and only then .caption, which means that in the hover state, .overlay has a delay of 0s, and in .caption, for example, 0.3s
.effect:hover .caption { top: 0px; transition-delay: 0.3s; } .effect:hover .overlay { transition-delay: 0s; } But, when we remove the hover, the elements return to their normal behavior, in which first, without any delay, the .caption returns to the place, and then the .overlay, and, therefore, we must cancel the delay in the first, and add the second:
.effect .caption { position: absolute; top: -100%; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.2s linear 0s; } .effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 50%; left: 0px; position: absolute; transition: all 0.15s linear 0.3s; } Now the sequence will be respected, and the elements will move in the correct order.
Effect # 7.3 is almost the same as the previous one, the only difference is in the styles for .overlay:
.effect .overlay { background: rgba(0,0,0,0.7); width: 50%; height: 100%; position: absolute; transition: all 0.15s linear 0.4s; } .effect .overlay-top { left: 0; top: -100%; } .effect .overlay-bottom { right: 0; top: 100%; } .effect:hover .overlay { top: 0; transition-delay: 0s; } With the effect of # 7.1 will have to tinker a little longer. Like # 7.3, it differs from # 7.2 only in the position and styles for .overlay, with two triangles going to the top right and bottom to the left.
But, of course, we will not have triangles, but rectangles. Here are common styles for both .overlay:
.effect .overlay { background: rgba(0,0,0,0.7); width: 408px; height: 170px; position: absolute; transform: rotate(33deg); transition: all 0.15s linear 0.3s; } This is important: the width and height of the rectangles should be individually adjusted to the size of your container with the effect, as well as the coordinates to which we place them (and to which we later move). What we do: take our rectangles, expand by 33 degrees each, shift the top to the upper right corner of the container .effect, lower to the lower left, respectively, and on the hover we shift them to contact along the diagonal line of the container rectangle .effect:
.effect .overlay-top { top: -158px; left: 142px; } .effect:hover .overlay-top { top: -50px; left: -1px; } .effect .overlay-bottom { top: 192px; left: -244px; } .effect:hover .overlay-bottom { top: 79px; left: -111px; } .effect:hover .overlay { transition-delay: 0s; } Other styles are identical to the styles of previous effects.
We apply the acquired skills in practice. More tricks! Effects # 8.1- # 10.3
# 8.1- # 8.3
Example
The highlight of these effects is the bounce effect, which is built on the value of the transition-timing-function property of the transition for .overlay.
The html structure is:
<div class="effect"> <img src="img/ef8.jpg" alt="Effect #8" /> <div class="overlay"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> In this case, .overlay will need only one. These are the styles needed for it:
.effect .overlay { background: rgba(0,0,0,0.7); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0); transition: all 0.4s cubic-bezier(0, 1.31, 1, -0.29) 0.4s; } Well, on hover we increase it:
.effect:hover .overlay { transform: scale(1); transition-delay: 0s; } So that .caption is not distracting, all that we prescribe for it is a change in transparency:
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; opacity: 0; transition: all 0.2s linear 0s; } .effect:hover .caption { opacity: 1; transition-delay: 0.6s; } Other styles remain default.
The effects of # 8.2- # 8.3 are similar. The only difference is that in # 8.2 scaleX () is used, and in # 8.3 - scaleY (), which I described in detail when parsing effects # 3.1- # 3.3
# 9.1- # 9.3
Example
Effect # 9.1 is based on the fact that two .overlays appear in turn from the center, and after them with a small bounce-effect .caption leaves.
As for the html structure, it is as follows:
<div class="effect"> <img src="img/ef9.jpg" alt="Effect #9" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> The styles for <h4>, <p> and <a> remain unchanged. Consider styles for .overlay:
.effect .overlay { background: rgba(0,0,0,0.35); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(0); } Since .overlay-1 and .overlay-2 enter at different times, the transition will be given to everyone - their own:
.effect .overlay-1 { transition: all 0.2s linear 0.3s; } .effect .overlay-2 { transition: all 0.2s linear 0.6s; } .effect:hover .overlay { transform: scale(1); } Accordingly, when removing the hover, they disappear with a delay relative to each other. Therefore, for .overlay-1 we set delay: 0s, and for .overlay-2 - delay: 0.2s (I wrote more about the effect of the delay on the order of appearance and disappearance of elements when parsing effects # 7.1- # 7.3)
.effect:hover .overlay-1 { transition-delay: 0s; } .effect:hover .overlay-2 { transition-delay: 0.2s; } It remains to consider the styles.
.effect .caption { position: absolute; top: 0px; left: 100%; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.4s cubic-bezier(0.05, -0.24, 0, 1.33) 0s; } .effect:hover .caption { left: 0px; transition-delay: 0.4s; } Effect # 9.2 is similar, only .overlay is round and .caption, like .overlay, comes from the center:
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.3s linear 0s; transform: scale(0); } .effect:hover .caption { transform: scale(1); transition-delay: 0.4s; } .effect .overlay { background: rgba(0,0,0,0.35); width: 2px; height: 2px; position: absolute; top: 50%; left: 50%; border-radius: 50%; transform: scale(0); } .effect .overlay-1 { transition: all 0.5s linear 0.3s; } .effect .overlay-2 { transition: all 0.5s linear 0.6s; } Other styles are similar to effect styles. # 9.1.
Effect # 9.3 is constructed as follows. This html structure is needed:
<div class="effect”> <img src="img/ef9.jpg" alt="Effect #9" /> <div class="overlay"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> To achieve this look for .overlay, we will give it a gradually increasing box-shadow:
.effect .overlay { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; transition: all 0.3s linear 0.3s; } .effect:hover .overlay { box-shadow: inset 0px 0px 25px 100px rgba(0,0,0,0.7); } The initial position for .caption will be: a 180-degree turn and opacity: 0. On the hover, expand the .caption, which, in the process of turning, becomes opaque:
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; opacity: 0; transform: rotate(180deg); transition: all 0.3s linear 0s; } .effect:hover .caption { opacity: 1; transform: rotate(0deg); transition-delay: 0.5s; } All other styles are default.
# 10.1- # 10.3
Example
Effect # 10.1 consists of five steps that change the size of the .overlay elements and, as if emerging, .caption.
The html structure needs this:
<div class="effect"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="overlay overlay-3"></div> <div class="overlay overlay-4"></div> <div class="overlay overlay-5"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> First, build a “ladder”. Each .overlay differs from another in its location and value of the delay parameter:
.effect .overlay { background: rgba(0,0,0,0.7); width: 20%; height: 100%; position: absolute; top: 100%; } .effect .overlay-1 { left: 0; transition: all 0.15s linear 0.2s; } .effect .overlay-2 { left: 20%; transition: all 0.15s linear 0.25s; } .effect .overlay-3 { left: 40%; transition: all 0.15s linear 0.3s; } .effect .overlay-4 { left: 60%; transition: all 0.15s linear 0.35s; } .effect .overlay-5 { left: 80%; transition: all 0.15s linear 0.4s; } On hover, their delay will also vary:
.effect:hover .overlay { top: 0px; } .effect:hover .overlay-1 { transition-delay: 0s; } .effect:hover .overlay-2 { transition-delay: 0.1s; } .effect:hover .overlay-3 { transition-delay: 0.15s; } .effect:hover .overlay-4 { transition-delay: 0.2s; } .effect:hover .overlay-5 { transition-delay: 0.25s; } The most interesting and difficult here is .caption. Here are the basic styles for it:
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transition: all 0.3s linear 0s; } Now we need to give it a position before the start of the animation. First, deploy, because when we hover the mouse, we see how .caption rotates at a certain angle. Let's set also transform-origin, defining a point around which transformation will take place. Add transform: rotate (-50deg); and transform-origin: 0% 100%; .The next step will be an offset vertically and horizontally to provide a “dive” a little later. We will shift using transform: translate (x, y), which shifts the element along the X and Y axis, respectively. Our task is to move the .caption almost to the very angle horizontally and about two-thirds beyond the limits of the .effects container vertically:
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 100%; color: #fff; transform: rotate(-50deg) translate(-101px,291px); transform-origin: 0% 100%; transition: all 0.3s linear 0s; } .caption , . height: 0px; overflow: hidden; . :
.effect .caption { position: absolute; top: 0px; left: 0px; background: transparent; width: 100%; height: 0px; overflow: hidden; color: #fff; transform: rotate(-50deg) translate(-101px,291px); transform-origin: 0% 100%; transition: all 0.3s linear 0s; } , .caption hover, , rotate(0deg) :
effect:hover .caption { height: 100%; transform: rotate(0deg) translate(0px,0px); transition-delay: 0.3s; } <h4>, <p> <a> .
#10.2 .overlay, , “” <h4>, <p> <a>.
html- :
<div class="effect"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay overlay-1"></div> <div class="overlay overlay-2"></div> <div class="caption"> <h4>Title is Here</h4> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</p> <a class="btn" href="#" title="View More">View More</a> </div> </div> .overlay, :
.effect .overlay-1 { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 0px; height: 0px; overflow: hidden; transition: all 0.3s linear 0.3s; } .effect:hover .overlay-1 { width: 100%; height: 100%; transition-delay: 0s; } More interesting with the lower right. Since the width of the border is 4px, simply setting the width and height to 100% is not enough, you need to compensate 8px vertically and horizontally, which will help calc:
effect .overlay-2 { position: absolute; bottom: 0px; right: 0px; background: transparent; border: 4px double #fff; width: 0px; height: 0px; opacity: 0; transition: all 0.3s linear 0.3s; } .effect:hover .overlay-2 { width: 100%; max-width: calc(100% - 8px); height: 100%; max-height: calc(100% - 8px); opacity: 1; transition-delay: 0s; } We now turn to .caption and its contents. For .caption, the styles remain defaulted; they will change for the <h4>, <p> and <a> relocatable elements, each of which needs to be shifted to the top. To prevent the header from underlaying on the border with an underscore, let's calculate the width, like .overlay-2:
.effect .caption h4 { font-size: 21px; font-weight: 700; text-transform: uppercase; text-align: center; border-bottom: 1px solid white; padding-bottom: 20px; margin: 20px auto 0px auto; width: calc(100% - 8px); position: relative; top: -100%; transition: all 0.3s linear 0.2s; } .effect .caption p { margin: 15px 0px; text-align: center; font-style: italic; padding: 0px 10px; position: relative; top: -100%; transition: all 0.3s linear 0.1s; } .effect .caption a.btn { width: 120px; text-align: center; display: block; background: #68432d; color: #fff; padding: 10px 0px; border-radius: 5px; margin: 0px auto 0px auto; position: relative; top: -100%;; transition: all 0.3s linear 0s; } It only remains for the elements to descend on the hover, and in the order we set:
.effect:hover .caption a.btn, .effect:hover .caption p, .effect:hover .caption h4 { top: 0px; } .effect:hover .caption a.btn { transition-delay: 0.3s; } .effect:hover .caption p { transition-delay: 0.4s; } .effect:hover .caption h4 { transition-delay: 0.5s; } Effect # 10.3 consists of an increasing image and a change in the rotation angle of the .caption on the hover.
The html structure needs a default, as well as the styles for <h4>, <p> and <a>. And we begin with increasing the picture:
.effect img { width: 100%; height: 100%; transition: all 0.25s linear 0.3s; transform: scale(1); } .effect:hover img { transform: scale(1.3); transition-delay: 0s; } .caption — , , 30 , . transition, :
- opacity , , . opacity 0.1s linear 0s
- transform , .1, transition-timing-function, : transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s
.effect .caption { position: absolute; top: 0px; left: 0px; background: rgba(0,0,0,0.7); width: 100%; height: 100%; color: #fff; opacity: 0; transform: rotate(30deg) translate(30px,-89px); transition: transform 0.35s cubic-bezier(0.49, -0.19, 0.7, -0.01) 0.1s, opacity 0.1s linear 0s; } .effect:hover .caption { transform: rotate(0deg) translate(0px,0px); opacity: 1; transition-delay: 0.3s; } , !
Source: https://habr.com/ru/post/265451/
All Articles