Intermediate CSS3 Hover Effects. Step by step tutorial. Part 1
This article is a logical continuation of my previous article on the basics of CSS3 transitions and, if I showed the principles of how these principles work with simple examples, now I would like to move on to more complex, beautiful and interesting effects.
Due to the large size of the article is divided into three parts. The second part of. The third part.
Demo materials are here . All prefixes are in the demo, but here I will not emphasize them.
')
Warning: effects work only in modern browsers that support the features of CSS3.
Preparation for work.
To create effects you need such a default html structure. Instead of .eff, the code of each effect will use the class .eff-n, where n is the effect number:
By definition, each effect will have at least one picture, a block with a description, including a title, a small description, and a “View More” button. In addition, each effect contains a number of unique auxiliary elements that we will add to the main structure.
Default css-styles will be as follows:
Effect # 1
Example
Add a block with an icon to our html-code. It consists of a container with a translucent background and a rotating container with elements of a circle and an icon inside. So the default code with the new block will look like:
The first stage is to hide the .caption, add transparency and transition for a smooth appearance when it is needed:
Then we stylize .overlay, which increases when hovering, fading to full transparency:
We will set the delay for increasing the size and transparency when we define styles for the hover state of this element, now the delay is set for the appearance of .overlay after the hover is removed, and the effect should be taken as it was.
Next, create a circle with an icon in the center of the elements with the .circ class. So that the circle could gradually, side by side, turn into a square, we will assemble it from four blocks, each of which will be given only one rounded border.
Styles for the icon:
We set the styles for .circle-with-icon so that the circle stands in the center of the substrate and rotates:
We collect effect.
Spinning .circle-with-icon:
Turn the circle into a square:
Increase .overlay and change its transparency:
We show .caption:
Effect # 2
Example
For this effect, the html structure will be similar to the structure of the previous effect:
Since the .caption for this effect leaves on the right, we will hide it, shifting to the right beyond the edge of the block with the effect:
Styles for .caption elements remain default.
The styles and logic of the block with the background, the circle and the icon are also similar to the previous effect, except for the values ​​of the transition property:
For .circle-with-icon, transition-delay and transition-duration also change:
We collect effect.
First, .circ is not only straightened, but also rotated 45 degrees to create a diamond:
Then the whole block with the rhombus and icon disappears:
The substrate expands to the entire block size with the effect:
Leaves .caption:
Effect # 3
Example
For this effect, the html structure is similar to effects # 1-2, here you also add a block with a substrate, a circle and an icon:
This time .caption is shifted upwards beyond the edge of the block with the effect:
Styles for .caption elements remain default.
Set new transition values ​​for .overlay:
The styles .circ and .circle-with-icon remain the same as in effects # 1-2:
Since hovering will have different behavior for different parts of the circle, the transition value for them will also differ.
Left and right sides just fade slowly:
The bottom side straightens, goes to the right and becomes transparent after a short period of time, so that when we take off the hover, we do not see how it returns to its place:
Well, the upper part does the same thing as the lower part, only, straightening, still goes down:
For the icon, transition is also added:
We collect effect.
First, the right and left sides of the circle disappear:
Then the top part goes down to the bottom:
In the process, they both straighten up and then move off to the right:
Icon goes left:
The substrate collapses in the center:
And .caption appears:
Effect # 4
Example
Let's add the basic html-structure with a block with a substrate, an icon and borders that appear when hovering:
Next, hide the .caption, but not entirely, but each element separately, so that they appear in turn:
Now stylize the .overlay and icon. The icon requires a separate transition, as it will disappear during the expansion of the substrate.
Next you need to specify the styles for the container with borders:
Common styles for all borders:
And the position, width and height for each separately:
We collect effect.
First expands the substrate:
At the same time, the icon disappears. For it, we cancel when we hover the transition-delay so that it disappears as soon as the substrate begins to expand, but if we remove the hover, it will appear only after the substrate returns to its correct size.
Next, change the transparency of the container with borders:
And, finally, we change the size of each of the borders, selecting such transition-delay, so that the borders change one by one:
It remains only to show the elements.
Effect # 5
Example
This time we will supplement the default structure with two blocks with external and internal borders:
This time the .caption elements will also be hidden one by one:
Next are the styles for the substrate and icons:
Denote styles for two containers with borders:
Common styles for all general borders, large and small:
Now styles for each border. The small ones from the big ones differ in the initial coordinates so that, when hovering, they increase towards each other:
We collect effect.
When hovering expand the substrate and remove the icon. I wrote more about the transition-delay for the icon for effect # 4.
Change the transparency for containers with borders:
Define styles for moving borders:
It remains to develop the elements .caption from the bottom up with a longer period of time than with effect # 4:
Effect # 6
Example
The default structure is supplemented with one block with a substrate, an icon and borders:
Since .caption appears from the center, increasing as the substrate, we can apply the following styles:
All elements of .caption remain default styles.
Styles for .overlay and icons:
Styles for a container with borders:
Common styles for all borders:
Now we register styles for each border separately. The most important thing is the transform-origin, which determines which point each border will scroll to:
We collect effect.
Extend .overlay and remove the icon. I wrote more about the transition-delay for the icon for effect # 4.
Change the transparency for the block with borders:
Now scroll the border 90 degrees relative to the given point:
And increase .caption:
Effect # 7
Example
In this effect, the picture leaves to the right, breaking up into five parts. To create the illusion of five pieces, we need to add to the html structure as many copies of the picture, into how many parts we want to divide it, and we will operate on each picture as a separate piece of the overall image:
Set styles for .img-block and for all .img:
Now the task is to place each img tag and a picture inside it so that everything looks as if we have one picture. Therefore, we will place the .img blocks one under another overlapped with an indent of 20%, increasing the z-index to each next one, and moving the image in each of them relative to the block itself is 20% higher.
So in the first .img-block, located at the very top, there will be no changes, and here are his styles:
The second block should be lowered 20% lower, and the picture in it should be raised 20% up:
The third, fourth and fifth are lowered by 40%, 60% and 80%, respectively, the pictures in them rise to the same number of percent:
Moving to .caption, hidden, thanks to the z-index, under all the pictures. For .caption we prescribe transparency, otherwise this block will be visible for a second while the pictures are loaded, which will lead to the “flashing” effect.
Styles of the .caption elements remain defaulted.
It remains to do only. Overlay with the icon:
We collect effect.
First, the hover goes down and sideways. Overlay:
Then all .img-blocks move aside one by one. Well, since the transition-delay, other than 0s, we stamped them only on the hover, all blocks are returned back simultaneously, as a whole.
And remove the transparency. Caption:
Effect # 8
Example
In the same way as in the past effect, we have here not one picture, but five pictures that overlap each other, manipulating them, we will create the illusion of the collapse of one picture into five parts. The html structure is as follows:
Styles for .img-block and common to all .img:
In this case, we shift each .img block 20% lower and to the left relative to the previous one, increasing the z-index to it, and the picture in it is 20% higher and to the right, respectively, forming a kind of “corner” effect # 7).
The styles for .caption are similar to those in effect # 7, you can read about the need for transparency in the same place:
Other .caption elements have default styles.
Add .overlay and icon:
We collect effect.
Disappears .overlay:
Reduce the transparency of the .img blocks so that they disappear in turn:
Returning transparency for .caption:
Effect # 9
Example
In this case, the picture is divided into 4 parts, so that we will have only 4 blocks with slightly more complex positioning of the pictures inside than in effect # 7, where I told in detail how this mechanism works.
Styles for .img-block and common to all .img:
Now place each .img block in its place. The first one will be in the upper left corner, and we don’t touch the picture inside:
The second block is placed in the upper right corner, and the image is shifted 50% to the left:
The third block will be at the bottom left, the picture is shifted by 50% up:
Well, the fourth - at the bottom right, and the picture will shift up and to the left:
Thus, it remains only to place .overlay and .caption in the same way as effects # 7 - # 8. The need for transparency for .caption is described in more detail in effect # 7.
All elements of .caption have default styles.
We collect effect.
Remove the .overlay and return the opacity .caption:
Now one by one we make transparent blocks with pictures:
Effect # 10
Example
For this effect, the default html structure is replenished with a .overlay block with an icon and a block for the gradient:
The styles for .caption are such that .caption will expand from the center vertically.
The elements of .caption styles are defaulted.
Now let's style .overlay:
For Transform-origin, we set the value only along the X axis, we don’t need the Y axis here: as you can see, the transformation occurs only horizontally.
Styles for the icon disappearing as soon as the .overlay animation begins, which we put on hover, and returning when it is almost over, which we will define right now:
Now the block with the gradient. To create a gradient, we need to specify, first, its appearance, in this case radial, and second, the shape for the radial gradient: a circle or an ellipse, and, in this case, a circle, and, third, not less than two colors for the transition, the first - the one in the center, the second - the one that will be on the edges.
We collect effect.
First we remove to the right .overlay:
Change the transparency of the block with the gradient:
Expand .caption from the center:
Effect # 11
Example
For this effect, similarly to the previous one, the html structure is complemented by a block of the substrate with an icon and a block with a gradient:
Styles for .caption:
Elements .caption have default styles.
Now the gradient block. In contrast to the radial gradient, which was considered in the effect of # 10, the linear gradient is constructed slightly differently. He needs to specify the direction in which there can be one parameter, if the gradient is vertical or horizontal, and two parameters, if the gradient is diagonal. In addition, the direction can be specified in degrees, which is discussed in more detail for the # 12 effect. The rest is all the same.
In addition, we scale the gradient block along the X axis to zero and set the point relative to which the animation will take place to the extreme left position, so the block will turn from left to right, becoming more opaque in the process:
The .overlay block with the icon is explained in more detail in the description of effect # 10:
We collect effect.
We remove to the right .overlay:
Extend the block with the gradient:
And by the time when the block with the gradient almost got opacity: 1; .caption appears:
Due to the large size of the article is divided into three parts. The second part of. The third part.
Demo materials are here . All prefixes are in the demo, but here I will not emphasize them.
')
Warning: effects work only in modern browsers that support the features of CSS3.
Preparation for work.
To create effects you need such a default html structure. Instead of .eff, the code of each effect will use the class .eff-n, where n is the effect number:
<div class="eff"> <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> By definition, each effect will have at least one picture, a block with a description, including a title, a small description, and a “View More” button. In addition, each effect contains a number of unique auxiliary elements that we will add to the main structure.
Default css-styles will be as follows:
.eff { width: 300px; height: 300px; overflow: hidden; position: relative; cursor: pointer; } .eff img { min-width: 100%; min-height: 100%; } .eff .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; } .eff .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; } .eff .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; text-decoration: none; } Effect # 1
Example
Add a block with an icon to our html-code. It consists of a container with a translucent background and a rotating container with elements of a circle and an icon inside. So the default code with the new block will look like:
<div class="effect eff-1"> <img src="img/ef1.jpg" alt="Effect #1" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </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 first stage is to hide the .caption, add transparency and transition for a smooth appearance when it is needed:
.eff-1 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } Then we stylize .overlay, which increases when hovering, fading to full transparency:
.eff-1 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: transform 0.2s linear 0s, opacity 0.2s linear 0.35s; } We will set the delay for increasing the size and transparency when we define styles for the hover state of this element, now the delay is set for the appearance of .overlay after the hover is removed, and the effect should be taken as it was.
Next, create a circle with an icon in the center of the elements with the .circ class. So that the circle could gradually, side by side, turn into a square, we will assemble it from four blocks, each of which will be given only one rounded border.
.eff-1 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-1 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-1 .overlay .top-circ { border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-1 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-1 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; } Styles for the icon:
.eff-1 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; } We set the styles for .circle-with-icon so that the circle stands in the center of the substrate and rotates:
.eff-1 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: transform 0.4s linear 0s; } We collect effect.
Spinning .circle-with-icon:
.eff-1:hover .circle-with-icon { transform: rotate(360deg); } Turn the circle into a square:
.eff-1:hover .overlay .circ { -webkit-border-radius: 0px; border-radius: 0px; } Increase .overlay and change its transparency:
.eff-1:hover .overlay { transform: scale(5); opacity: 0; transition-delay: 0.55s; } We show .caption:
.eff-1:hover .caption { opacity: 1; transition-delay: 0.85s; } Effect # 2
Example
For this effect, the html structure will be similar to the structure of the previous effect:
<div class="effect eff-2"> <img src="img/ef2.jpg" alt="Effect #2" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </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> Since the .caption for this effect leaves on the right, we will hide it, shifting to the right beyond the edge of the block with the effect:
.eff-2 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Styles for .caption elements remain default.
The styles and logic of the block with the background, the circle and the icon are also similar to the previous effect, except for the values ​​of the transition property:
.eff-2 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.55s; } .eff-2 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-2 .overlay .left-circ { border-left: 2px solid black; transition: all 0.15s linear 0.3s; } .eff-2 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: all 0.15s linear 0.2s; } .eff-2 .overlay .right-circ { border-right: 2px solid black; transition: all 0.15s linear 0.1s; } .eff-2 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: all 0.15s linear 0s; } .eff-2 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; } For .circle-with-icon, transition-delay and transition-duration also change:
.eff-2 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; transition: all 0.2s linear 0.8s; } We collect effect.
First, .circ is not only straightened, but also rotated 45 degrees to create a diamond:
.eff-2:hover .overlay .circ { border-radius: 0px; transform: rotate(45deg); } Then the whole block with the rhombus and icon disappears:
.eff-2:hover .overlay .circle-with-icon { opacity: 0; transition-delay: 0.4s; } The substrate expands to the entire block size with the effect:
.eff-2:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } Leaves .caption:
.eff-2:hover .caption { left: 0px; transition-delay: 0.7s; } Effect # 3
Example
For this effect, the html structure is similar to effects # 1-2, here you also add a block with a substrate, a circle and an icon:
<div class="effect eff-3"> <img src="img/ef3.jpg" alt="Effect #3" /> <div class="overlay"> <div class="circle-with-icon"> <div class="circ left-circ"></div> <div class="circ top-circ"></div> <div class="circ right-circ"></div> <div class="circ bottom-circ"></div> <div class="icon"></div> </div> </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> This time .caption is shifted upwards beyond the edge of the block with the effect:
.eff-3 .caption { position: absolute; top: -100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Styles for .caption elements remain default.
Set new transition values ​​for .overlay:
.eff-3 .overlay { width: 180px; height: 120px; background: rgba(255,255,255,0.6); position: absolute; top: 90px; left: 60px; transition: all 0.2s linear 0.65s; } The styles .circ and .circle-with-icon remain the same as in effects # 1-2:
.eff-3 .overlay .circ { width: 80px; height: 80px; -webkit-border-radius: 100px; border-radius: 100px; position: absolute; top: 0px; left: 0px; background: transparent; } .eff-3 .overlay .circle-with-icon { width: 82px; height: 82px; margin: auto; position: relative; top: 19px; opacity: 1; } Since hovering will have different behavior for different parts of the circle, the transition value for them will also differ.
Left and right sides just fade slowly:
.eff-3 .overlay .left-circ { border-left: 2px solid black; transition: border-color 0.3s linear 0s; } .eff-3 .overlay .right-circ { border-right: 2px solid black; transition: border-color 0.3s linear 0s; } The bottom side straightens, goes to the right and becomes transparent after a short period of time, so that when we take off the hover, we do not see how it returns to its place:
.eff-3 .overlay .bottom-circ { width: 82px; border-bottom: 2px solid black; transition: border-radius 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } Well, the upper part does the same thing as the lower part, only, straightening, still goes down:
.eff-3 .overlay .top-circ { width: 82px; border-top: 2px solid black; transition: border-radius 0.3s linear 0s, top 0.3s linear 0s, left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } For the icon, transition is also added:
.eff-3 .circle-with-icon .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 31px; left: 24px; transition: left 0.3s linear 0.45s, opacity 0.01s linear 0.75s; } We collect effect.
First, the right and left sides of the circle disappear:
.eff-3:hover .overlay .left-circ, .eff-3:hover .overlay .right-circ { border-color: transparent; } Then the top part goes down to the bottom:
.eff-3:hover .overlay .top-circ { top: 93%; } In the process, they both straighten up and then move off to the right:
.eff-3:hover .overlay .top-circ, .eff-3:hover .overlay .bottom-circ { -webkit-border-radius: 0px; border-radius: 0px; left: 500%; opacity: 0; } Icon goes left:
.eff-3:hover .circle-with-icon .icon { left: -500%; opacity: 0; } The substrate collapses in the center:
.eff-3:hover .overlay { transform: scale(0); } And .caption appears:
.eff-3:hover .caption { top: 0px; transition-delay: 0.75s; } Effect # 4
Example
Let's add the basic html-structure with a block with a substrate, an icon and borders that appear when hovering:
<div class="effect eff-4"> <img src="img/ef4.jpg" alt="Effect #4" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </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> Next, hide the .caption, but not entirely, but each element separately, so that they appear in turn:
.eff-4 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-4 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-4 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-4 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-4 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; } Now stylize the .overlay and icon. The icon requires a separate transition, as it will disappear during the expansion of the substrate.
.eff-4 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-4 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Next you need to specify the styles for the container with borders:
.eff-4 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } Common styles for all borders:
.eff-4 .border { background: black; position: absolute; transition: all 0.2s linear 0s; } And the position, width and height for each separately:
.eff-4 .border-top { height: 2px; width: 0px; top: 0px; left: 0px; } .eff-4 .border-right { height: 0px; width: 2px; top: 2px; right: 0px; } .eff-4 .border-bottom { height: 2px; width: 0px; bottom: 0px; right: 2px; } .eff-4 .border-left { height: 0px; width: 2px; bottom: 2px; left: 0px; } We collect effect.
First expands the substrate:
.eff-4:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } At the same time, the icon disappears. For it, we cancel when we hover the transition-delay so that it disappears as soon as the substrate begins to expand, but if we remove the hover, it will appear only after the substrate returns to its correct size.
.eff-4:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Next, change the transparency of the container with borders:
.eff-4:hover .borders { opacity: 1; } And, finally, we change the size of each of the borders, selecting such transition-delay, so that the borders change one by one:
.eff-4:hover .border-top { width: 100%; transition-delay: 0.2s; } .eff-4:hover .border-right { height: 100%; max-height: calc(100% - 2px); transition-delay: 0.4s; } .eff-4:hover .border-bottom { width: 100%; max-width: calc(100% - 2px); transition-delay: 0.6s; } .eff-4:hover .border-left { height: 100%; max-height: calc(100% - 4px); transition-delay: 0.8s; } It remains only to show the elements.
.eff-4:hover .caption h4, .eff-4:hover .caption p, .eff-4:hover .caption a { opacity: 1; } .eff-4:hover .caption h4 { transition-delay: 0.65s; } .eff-4:hover .caption p { transition-delay: 0.7s; } .eff-4:hover .caption a { transition-delay: 0.75s; } Effect # 5
Example
This time we will supplement the default structure with two blocks with external and internal borders:
<div class="effect eff-5"> <img src="img/ef5.jpg" alt="Effect #5" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> <div class="borders-small"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </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> This time the .caption elements will also be hidden one by one:
.eff-5 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-5 .caption h4 { width: 80%; margin: 40px auto 0px auto; background: rgba(0,0,0,0.7); font-weight: 400; text-transform: uppercase; font-size: 22px; padding: 6px 0px; position: relative; opacity: 0; transition: all 0.2s linear 0s; } .eff-5 .caption h4:before { content: ""; width: 0px; height: 0px; display: block; border: 20px solid transparent; border-top: 20px solid rgba(0,0,0,0.7); position: absolute; top: 100%; left: 42%; } .eff-5 .caption p { width: 100%; max-width: calc(80% - 20px); margin: 40px auto 0px auto; background: rgba(0,0,0,0.8); font-weight: 400; padding: 6px 10px; font-size: 14px; opacity: 0; transition: all 0.2s linear 0s; } .eff-5 .caption a { display: inline-block; margin: 30px auto 0px auto; background-color: #7F3B1B; color: inherit; padding: 7px 20px; font-size: 15px; box-shadow: inset 0px 0px 7px 1px rgba(0,0,0,0.2); border-radius: 5px; opacity: 0; text-decoration: none; transition: all 0.2s linear 0s; } Next are the styles for the substrate and icons:
.eff-5 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-5 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Denote styles for two containers with borders:
.eff-5 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } .eff-5 .borders-small { width: 88%; height: 88%; position: absolute; top: 6%; left: 6%; opacity: 0; transition: all 0.01s linear 0s; } Common styles for all general borders, large and small:
.eff-5 .border { background: black; position: absolute; transition: all 0.3s linear 0s; } Now styles for each border. The small ones from the big ones differ in the initial coordinates so that, when hovering, they increase towards each other:
.eff-5 .borders .border-top { top: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-left { top: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders .border-bottom { bottom: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders .border-right { bottom: 0px; right: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-top { top: 0px; right: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-left { bottom: 0px; left: 0px; width: 2px; height: 0px; } .eff-5 .borders-small .border-bottom { bottom: 0px; left: 0px; width: 0px; height: 2px; } .eff-5 .borders-small .border-right { top: 0px; right: 0px; width: 2px; height: 0px; } We collect effect.
When hovering expand the substrate and remove the icon. I wrote more about the transition-delay for the icon for effect # 4.
.eff-5:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-5:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Change the transparency for containers with borders:
.eff-5:hover .borders, .eff-5:hover .borders-small { opacity: 1; } Define styles for moving borders:
.eff-5:hover .border-top, .eff-5:hover .border-bottom { width: 100%; transition-delay: 0.2s; } .eff-5:hover .border-left, .eff-5:hover .border-right { height: 100%; transition-delay: 0.2s; } It remains to develop the elements .caption from the bottom up with a longer period of time than with effect # 4:
.eff-5:hover .caption h4, .eff-5:hover .caption p, .eff-5:hover .caption a { opacity: 1; } .eff-5:hover .caption h4 { transition-delay: 0.75s; } .eff-5:hover .caption p { transition-delay: 0.65s; } .eff-5:hover .caption a { transition-delay: 0.55s; } Effect # 6
Example
The default structure is supplemented with one block with a substrate, an icon and borders:
<div class="effect eff-6"> <img src="img/ef6.jpg" alt="Effect #6" /> <div class="overlay"> <div class="icon"></div> <div class="borders"> <div class="border border-top"></div> <div class="border border-right"></div> <div class="border border-bottom"></div> <div class="border border-left"></div> </div> </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> Since .caption appears from the center, increasing as the substrate, we can apply the following styles:
.eff-6 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transform: scale(0); transition: all 0.3s linear 0s; } All elements of .caption remain default styles.
Styles for .overlay and icons:
.eff-6 .overlay { width: 60px; height: 60px; background: rgba(255,255,255,0.6); position: absolute; top: 120px; left: 120px; transition: all 0.2s linear 0s; } .eff-6 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 18px; left: 13px; opacity: 1; transition: all 0.01s linear 0.2s; } Styles for a container with borders:
.eff-6 .borders { width: 90%; height: 90%; position: absolute; top: 5%; left: 5%; opacity: 0; transition: all 0.01s linear 0s; } Common styles for all borders:
.eff-6 .border { background: black; position: absolute; transition: all 0.4s linear 0s; } Now we register styles for each border separately. The most important thing is the transform-origin, which determines which point each border will scroll to:
.eff-6 .border-top { top: 0px; left: 2px; width: 100%; height: 2px; transform-origin: left top; } .eff-6 .border-left { bottom: 0px; left: 0px; width: 2px; height: 100%; transform-origin: left bottom; } .eff-6 .border-bottom { bottom: 0px; right: 2px; width: 100%; height: 2px; transform-origin: right bottom; } .eff-6 .border-right { top: 0px; right: 0px; width: 2px; height: 100%; transform-origin: right top; } We collect effect.
Extend .overlay and remove the icon. I wrote more about the transition-delay for the icon for effect # 4.
.eff-6:hover .overlay { width: 100%; height: 100%; top: 0px; left: 0px; } .eff-6:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Change the transparency for the block with borders:
.eff-6:hover .borders { opacity: 1; } Now scroll the border 90 degrees relative to the given point:
.eff-6:hover .border-top, .eff-6:hover .border-left, .eff-6:hover .border-bottom, .eff-6:hover .border-right { transform: rotate(90deg); transition-delay: 0.2s; } And increase .caption:
.eff-6:hover .caption { opacity: 1; transform: scale(1); transition-delay: 0.65s; } Effect # 7
Example
In this effect, the picture leaves to the right, breaking up into five parts. To create the illusion of five pieces, we need to add to the html structure as many copies of the picture, into how many parts we want to divide it, and we will operate on each picture as a separate piece of the overall image:
<div class="effect eff-7"> <div class="img-block"> <div class="img img-1"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-2"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-3"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-4"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> <div class="img img-5"> <img src="img/ef7.jpg" alt="Effect #7" /> </div> </div> <div class="overlay"> <div class="icon"></div> </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> Set styles for .img-block and for all .img:
.eff-7 .img-block { position: relative; height: 100%; } .eff-7 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; } Now the task is to place each img tag and a picture inside it so that everything looks as if we have one picture. Therefore, we will place the .img blocks one under another overlapped with an indent of 20%, increasing the z-index to each next one, and moving the image in each of them relative to the block itself is 20% higher.
So in the first .img-block, located at the very top, there will be no changes, and here are his styles:
.eff-7 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; } The second block should be lowered 20% lower, and the picture in it should be raised 20% up:
.eff-7 .img-block .img-2 { top: 20%; left: 0px; z-index: 3; } .eff-7 .img-block .img-2 img { transform: translateY(-20%); } The third, fourth and fifth are lowered by 40%, 60% and 80%, respectively, the pictures in them rise to the same number of percent:
.eff-7 .img-block .img-3 { top: 40%; left: 0px; z-index: 4; } .eff-7 .img-block .img-3 img { transform: translateY(-40%); } .eff-7 .img-block .img-4 { top: 60%; left: 0px; z-index: 5; } .eff-7 .img-block .img-4 img { transform: translateY(-60%); } .eff-7 .img-block .img-5 { top: 80%; left: 0px; z-index: 6; } .eff-7 .img-block .img-5 img { transform: translateY(-80%); } Moving to .caption, hidden, thanks to the z-index, under all the pictures. For .caption we prescribe transparency, otherwise this block will be visible for a second while the pictures are loaded, which will lead to the “flashing” effect.
.eff-7 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.2s; } Styles of the .caption elements remain defaulted.
It remains to do only. Overlay with the icon:
.eff-7 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-7 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } We collect effect.
First, the hover goes down and sideways. Overlay:
.eff-7:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } Then all .img-blocks move aside one by one. Well, since the transition-delay, other than 0s, we stamped them only on the hover, all blocks are returned back simultaneously, as a whole.
.eff-7:hover .img-block .img { left: 100%; } .eff-7:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-7:hover .img-block .img-2 { transition-delay: 0.3s; } .eff-7:hover .img-block .img-3 { transition-delay: 0.4s; } .eff-7:hover .img-block .img-4 { transition-delay: 0.5s; } .eff-7:hover .img-block .img-5 { transition-delay: 0.6s; } And remove the transparency. Caption:
.eff-7:hover .caption { opacity: 1; } Effect # 8
Example
In the same way as in the past effect, we have here not one picture, but five pictures that overlap each other, manipulating them, we will create the illusion of the collapse of one picture into five parts. The html structure is as follows:
<div class="effect eff-8"> <div class="img-block"> <div class="img img-1"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-2"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-3"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-4"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> <div class="img img-5"> <img src="img/ef8.jpg" alt="Effect #8" /> </div> </div> <div class="overlay"> <div class="icon"></div> </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> Styles for .img-block and common to all .img:
.eff-8 .img-block { position: relative; height: 100%; } .eff-8 .img-block .img { position: absolute; width: 100%; height: 100%; overflow: hidden; transition: all 0.2s linear 0s; } In this case, we shift each .img block 20% lower and to the left relative to the previous one, increasing the z-index to it, and the picture in it is 20% higher and to the right, respectively, forming a kind of “corner” effect # 7).
.eff-8 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; } .eff-8 .img-block .img-2 { top: 20%; right: 20%; z-index: 3; } .eff-8 .img-block .img-2 img { transform: translate(20%, -20%); } .eff-8 .img-block .img-3 { top: 40%; right: 40%; z-index: 4; } .eff-8 .img-block .img-3 img { transform: translate(40%, -40%); } .eff-8 .img-block .img-4 { top: 60%; right: 60%; z-index: 5; } .eff-8 .img-block .img-4 img { transform: translate(60%, -60%); } .eff-8 .img-block .img-5 { top: 80%; right: 80%; z-index: 6; } .eff-8 .img-block .img-5 img { transform: translate(80%, -80%); } The styles for .caption are similar to those in effect # 7, you can read about the need for transparency in the same place:
.eff-8 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.2s; } Other .caption elements have default styles.
Add .overlay and icon:
.eff-8 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.2s linear 0.2s; } .eff-8 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } We collect effect.
Disappears .overlay:
.eff-8:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } Reduce the transparency of the .img blocks so that they disappear in turn:
.eff-8:hover .img-block .img { opacity: 0; } .eff-8:hover .img-block .img-1 { transition-delay: 0.25s; } .eff-8:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-8:hover .img-block .img-3 { transition-delay: 0.55s; } .eff-8:hover .img-block .img-4 { transition-delay: 0.7s; } .eff-8:hover .img-block .img-5 { transition-delay: 0.85s; } Returning transparency for .caption:
.eff-8:hover .caption { opacity: 1; } Effect # 9
Example
In this case, the picture is divided into 4 parts, so that we will have only 4 blocks with slightly more complex positioning of the pictures inside than in effect # 7, where I told in detail how this mechanism works.
<div class="effect eff-9"> <div class="img-block"> <div class="img img-1"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-2"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-3"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> <div class="img img-4"> <img src="img/ef9.jpg" alt="Effect #9" /> </div> </div> <div class="overlay"> <div class="icon"></div> </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> Styles for .img-block and common to all .img:
.eff-9 .img-block { position: relative; height: 100%; } .eff-9 .img-block .img { position: absolute; width: 100%; overflow: hidden; transition: all 0.25s linear 0s; } Now place each .img block in its place. The first one will be in the upper left corner, and we don’t touch the picture inside:
.eff-9 .img-block .img-1 { top: 0px; left: 0px; z-index: 2; height: 100%; } The second block is placed in the upper right corner, and the image is shifted 50% to the left:
.eff-9 .img-block .img-2 { top: 0%; left: 50%; z-index: 3; height: 100%; } .eff-9 .img-block .img-2 img { transform: translate(-50%, 0); } The third block will be at the bottom left, the picture is shifted by 50% up:
.eff-9 .img-block .img-3 { top: 50%; left: 0%; z-index: 4; height: 100%; } .eff-9 .img-block .img-3 img { transform: translate(0%, -50%); } Well, the fourth - at the bottom right, and the picture will shift up and to the left:
.eff-9 .img-block .img-4 { top: 50%; left: 50%; z-index: 5; height: 100%; } .eff-9 .img-block .img-4 img { transform: translate(-50%, -50%); } Thus, it remains only to place .overlay and .caption in the same way as effects # 7 - # 8. The need for transparency for .caption is described in more detail in effect # 7.
.eff-9 .overlay { width: 200px; height: 200px; background: rgba(255,255,255,0.6); position: absolute; left: 70%; top: 70%; border-radius: 500px; z-index: 10; transition: all 0.3s linear 0s; } .eff-9 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 47px; left: 40px; } .eff-9 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; background: rgba(0,0,0,0.6); opacity: 0; z-index: 1; transition: all 0.01s linear 0.4s; } All elements of .caption have default styles.
We collect effect.
Remove the .overlay and return the opacity .caption:
.eff-9:hover .overlay { top: 100%; left: 100%; transition-delay: 0s; } .eff-9:hover .caption { opacity: 1; } Now one by one we make transparent blocks with pictures:
.eff-9:hover .img-block .img { opacity: 0; } .eff-9:hover .img-block .img-1 { transition-delay: 0.2s; } .eff-9:hover .img-block .img-2 { transition-delay: 0.4s; } .eff-9:hover .img-block .img-3 { transition-delay: 0.6s; } .eff-9:hover .img-block .img-4 { transition-delay: 0.8s; } Effect # 10
Example
For this effect, the default html structure is replenished with a .overlay block with an icon and a block for the gradient:
<div class="effect eff-10"> <img src="img/ef10.jpg" alt="Effect #10" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></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 .caption are such that .caption will expand from the center vertically.
.eff-10 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scaleY(0); transition: all 0.2s linear 0s; } The elements of .caption styles are defaulted.
Now let's style .overlay:
.eff-10 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } For Transform-origin, we set the value only along the X axis, we don’t need the Y axis here: as you can see, the transformation occurs only horizontally.
Styles for the icon disappearing as soon as the .overlay animation begins, which we put on hover, and returning when it is almost over, which we will define right now:
.eff-10 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; } Now the block with the gradient. To create a gradient, we need to specify, first, its appearance, in this case radial, and second, the shape for the radial gradient: a circle or an ellipse, and, in this case, a circle, and, third, not less than two colors for the transition, the first - the one in the center, the second - the one that will be on the edges.
.eff-10 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7)); opacity: 0; transition: all 0.3s linear 0.2s; } We collect effect.
First we remove to the right .overlay:
.eff-10:hover .overlay { transform: scaleX(0); } .eff-10:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Change the transparency of the block with the gradient:
.eff-10:hover .gradient { opacity: 1; transition-delay: 0.2s; } Expand .caption from the center:
.eff-10:hover .caption { transform: scaleY(1); transition-delay: 0.45s; } Effect # 11
Example
For this effect, similarly to the previous one, the html structure is complemented by a block of the substrate with an icon and a block with a gradient:
<div class="effect eff-11"> <img src="img/ef11.jpg" alt="Effect #11" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></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> Styles for .caption:
.eff-11 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } Elements .caption have default styles.
Now the gradient block. In contrast to the radial gradient, which was considered in the effect of # 10, the linear gradient is constructed slightly differently. He needs to specify the direction in which there can be one parameter, if the gradient is vertical or horizontal, and two parameters, if the gradient is diagonal. In addition, the direction can be specified in degrees, which is discussed in more detail for the # 12 effect. The rest is all the same.
In addition, we scale the gradient block along the X axis to zero and set the point relative to which the animation will take place to the extreme left position, so the block will turn from left to right, becoming more opaque in the process:
.eff-11 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: linear-gradient(to top right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transform: scaleX(0); opacity: 0; transform-origin: left; transition: transform 0.15s linear 0s, opacity 0.55s linear 0s; } The .overlay block with the icon is explained in more detail in the description of effect # 10:
.eff-11 .overlay { width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); border-right: 50px solid rgba(255,255,255,0.6); position: absolute; right: 0; bottom: 0; transform-origin: right; transition: all 0.2s linear 0s; } .eff-11 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 5px; transition: all 0.01s linear 0.2s; } We collect effect.
We remove to the right .overlay:
.eff-11:hover .overlay { transform: scaleX(0); } .eff-11:hover .overlay .icon { opacity: 0; transition-delay: 0s; } Extend the block with the gradient:
.eff-11:hover .gradient { transform: scaleX(1); opacity: 1; transition-delay: 0.2s; } And by the time when the block with the gradient almost got opacity: 1; .caption appears:
.eff-11:hover .caption { opacity: 1; transition-delay: 0.5s; } Source: https://habr.com/ru/post/274003/
All Articles