Intermediate CSS3 Hover Effects. Step by step tutorial. Part 3
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 first part . The second part of
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.
Effect # 22
Example
To create this effect, we will need to complement the basic html structure with two blocks with images and one block with an icon:
In this effect, in order for the picture to split into two parts, we create two blocks halfway across from the block with the effect, in each of which we place the same picture. Here are common styles for both blocks:
In order for the blocks to diverge in different directions in the indicated manner, we need to set a point for them relative to which the animation will occur. Here are the styles for each block separately:
Now we have both the right and left blocks display the same piece of the picture, so in the right block we will shift the picture to the left by 50%:
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
The internal .caption elements retain default styles.
And we stylize .overlay: I talked about the composition of isosceles triangles in effect # 19.
We collect effect.
Compress .overlay:
Styling the “decaying” picture:
Remove transparency .caption:
Effect # 23
Example
To create this effect, we will need to complement the basic html structure with two blocks with images and one block with an icon:
To make the picture open into two parts, we, as in effect # 22, create two blocks, each of which occupies half the height of the block with the effect, and in each of these blocks we put the same picture. Common styles for both blocks:
In order for the blocks to “shrink” relative to the upper and lower boundaries of the block with the effect, we need to set a transform-origin for each of them:
Now we can see the same part of the image both on the top and bottom blocks, so we move the image in the bottom block up 50% up so that its bottom part can be seen:
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
The internal .caption elements retain default styles.
Styling .overlay: I told about the creation of isosceles triangles in effect # 19.
We collect effect.
Compress the blocks with pictures to the edges of the block with effects:
Remove .overlay:
Return the .caption opacity:
Effect # 24
Example
To create this effect, we need to supplement the default html structure with four blocks with pictures inside and a block with an icon:
To create such an effect of a rising “curtain”, you need to take four blocks and place the same picture in them. The height of each block is a quarter of the height of the block with the effect:
Each block is 25% lower than the previous one, and the image in each next block rises by 25% relative to the position of the picture in the previous block (for more details on such an organization of blocks and pictures, see effect description # 7-9). Since, when hovering, the fourth block goes up and hides under the third, then they both go even higher and hide under the second, and then all three - under the first, the largest z-index will be in the first block, and the smallest - in the fourth. Here are the styles for all four blocks and their images:
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
The internal .caption elements retain default styles.
Styling .overlay. In more detail about drawing up of isosceles triangles I told in effect # 19.
We collect effect.
The task is to remove all the blocks with images so as to hide even the very first block outside the block with the effect. Thus, we will raise them all to 25% above the upper edge of the block with the effect:
The “curtain effect” is achieved by a combination of the time allotted for the animation (we wrote it above) and the rise delay:
Remove .overlay:
Making .caption opaque:
Effect # 25
Example
To create this effect, a block with an icon and three blocks are added to the default html structure, which will appear alternately:
Let's start with the styles for .fash blocks. There are three of them, they occupy one third of the block height with the effect of each:
Now we are styling .overlay, in which the width first changes, and it seems to stretch, and then the position relative to the block, as it slides to the left, beyond the limits of the block with the effect:
Hide .caption over the bottom edge of the block with an effect and give it a more complex transition-timing-function:
Styles of the .caption elements remain defaulted.
Now our task is to make so that when hovering first one .fash appears and disappears, and only then the next one appears. To do this, we need to use the animation property and its attendant @keyframes. Let's start with @keyframes: it is needed in order to set the name of the future animation and key points that the animated element passes in its movement. .Flash has three key points:
Thus, we can specify the following @keyframes, where flash is the name of the animation:
Now collect the effect.
When you hover, we need to run the animation. For this we use the animation property. Here we use three parameters: the name, the time required for all key points of each flash to pass, and animation-timing-function, similar to transition-timing-function.
Now, if you look at what happened, you will see that all .fash flashes at the same time and goes out, so we need to use another animation parameter — a delay that works like a delay for a transition:
Add “stretch” and disappear .overlay:
And raise .caption:
Effect # 26
Example
To create this effect, you need to add to the default structure a block with an icon and a block strip, which will be visible when you hover:
Let's start with the styling strip. This is a narrow long block that will fall and rise when you hover. It is rendered to the starting point of the animation: up, beyond the block with the effect.
Now let's set @keyframes to determine the key points of the animation (more about this is written in the effect # 25):
Set styles for .overlay, which is also discussed in more detail in effect # 25:
And set transparency for .caption:
Internal .caption elements still have default styles.
We collect effect.
We start animation of the block with a strip. As you can see, more parameters of the animation property are used here than in the past effect. In addition to the name of the animation, time and animation-timing-function is also used:
Remove .overlay:
Change the transparency .caption:
Effect # 27
Example
To work with this effect, you must add a default html-structure with a block with an icon and a block with a circle:
Let's start with a block with a circle that appears when hovering. Styles for the block itself:
When hovering the circle breaks into two halves in order to accomplish this, we will assemble it from two semicircular blocks, which we will then move away from each other:
Now create @keyframes for each of the semicircular blocks. I wrote about @keyframes in detail in effect # 25. As you can see, each of the semicircles passes three key points:
Set styles for .overlay, which is also discussed in more detail in effect # 25:
Remove down .caption
The remaining .caption elements still have default styles.
We collect effect.
First, we change the transparency of the block with a circle:
Then we call the animations of each of the semicircles. In addition to the parameters discussed in effects # 25-26, we use one new parameter here: animation-fill-mode. This setting determines which styles are applied to animated elements when the animation is finished or stopped. By default, after the animation, the elements return to the position specified by the first key point @keyframes, which we absolutely do not need here, otherwise a white circle will appear right behind the .caption. The forwards value is necessary in order for the elements to remain in the position specified by the last key point of @keyframes, that is, outside the block with the effect:
Now remove the .overlay:
And push up .caption:
Effect # 28
Example
To work with this effect, you need to complement the default html-structure with a block with an icon and a block with a semicircular notch, which becomes visible when you hover:
Let's start with the block with the notch. By itself, this block is a large circle with a border whose width is 3px, located so that only part of it is within the block with the effect. To fill the entire space of the block with the effect on the left side of the circle, let's give it a large semi-transparent shadow:
Now reduce the size of the .caption to zero:
Other .caption elements still have default styles.
It remains only to stylize the block with the icon. Here are his basic styles:
The task is to prescribe him the “bouncing” animation, and for this we need this @keyframes (for more information about @keyframes, see effect # 25). The element passes five key points:
We collect effect.
First, apply the animation to the block with the icon. Animation was discussed in detail in effect # 25, the animation-fill-mode parameter in effect # 27:
Then, changing the transparency, width and height of the element with the notch, we create the illusion of movement of this block:
And finally, we increase .caption:
Effect # 29
Example
For this effect, it is necessary to supplement the default html structure with a block with an icon and a square block that appears when you hover:
Let's start with a square block. There are very few initial styles in this block, because the main styles, including the transition, will be applied to it only during hover:
Move the .caption to the top, outside the block with the effect:
Internal .caption elements retain default styles.
We stylize a block with an icon completely similar to the same block from effect # 28, where I looked at these styles in more detail, here I just bring the styles themselves and @keyframes:
We collect effect.
First we add the styles for the square block. Increase it in size, make it opaque and add a shadow to create the illusion of having a background beyond the boundaries of the square. Why we add a transition only when hovering - because when you cancel hover, the square should immediately disappear.
Add a block animation with an icon, animation was discussed in detail in effect # 25, the animation-fill-mode parameter in effect # 27:
And omit .caption:
Effect # 30
Example
To create this effect, we need to supplement the default html structure with a block with an icon and a block with bubbles, in which you need to create as many bubble blocks as you want in your effect:
. #28, , @keyframes:
.caption :
.caption .
— .
:
( #10):
, :
@keyframes ( #25) , :
.
, animation #25, animation-fill-mode #27:
. . , , #25 , animation-iteration-count infinite, , . , :
, , :
.caption:
, , !
Due to the large size of the article is divided into three parts. The first part . The second part of
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.
Effect # 22
Example
To create this effect, we will need to complement the basic html structure with two blocks with images and one block with an icon:
<div class="effect eff-22"> <div class="img-block img-block-left"> <img src="img/ef22.jpg" alt="Effect #22" /> </div> <div class="img-block img-block-right"> <img src="img/ef22.jpg" alt="Effect #22" /> </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> In this effect, in order for the picture to split into two parts, we create two blocks halfway across from the block with the effect, in each of which we place the same picture. Here are common styles for both blocks:
.eff-22 .img-block { height: 100%; width: 50%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; }
In order for the blocks to diverge in different directions in the indicated manner, we need to set a point for them relative to which the animation will occur. Here are the styles for each block separately:
.eff-22 .img-block-left { top: 0px; left: 0px; transform-origin: right bottom; } .eff-22 .img-block-right { top: 0px; right: 0px; transform-origin: left bottom; }
Now we have both the right and left blocks display the same piece of the picture, so in the right block we will shift the picture to the left by 50%:
.eff-22 .img-block-right img { transform: translate(-50%, 0); }
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
.eff-22 .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.3s; }
The internal .caption elements retain default styles.
And we stylize .overlay: I talked about the composition of isosceles triangles in effect # 19.
.eff-22 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.2s; } .eff-22 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
We collect effect.
Compress .overlay:
.eff-22:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-22:hover .overlay .icon { opacity: 0; }
Styling the “decaying” picture:
.eff-22:hover .img-block-left { transform: rotate(-90deg); } .eff-22:hover .img-block-right { transform: rotate(90deg); } .eff-22:hover .img-block { transition-delay: 0.2s; }
Remove transparency .caption:
.eff-22:hover .caption { opacity: 1; transition-delay: 0s; }
Effect # 23
Example
To create this effect, we will need to complement the basic html structure with two blocks with images and one block with an icon:
<div class="effect eff-23"> <div class="img-block img-block-top"> <img src="img/ef23.jpg" alt="Effect #23" /> </div> <div class="img-block img-block-bottom"> <img src="img/ef23.jpg" alt="Effect #23" /> </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>
To make the picture open into two parts, we, as in effect # 22, create two blocks, each of which occupies half the height of the block with the effect, and in each of these blocks we put the same picture. Common styles for both blocks:
.eff-23 .img-block { height: 50%; width: 100%; overflow: hidden; position: absolute; z-index: 5; transition: all 0.3s linear 0s; }
In order for the blocks to “shrink” relative to the upper and lower boundaries of the block with the effect, we need to set a transform-origin for each of them:
.eff-23 .img-block-top { top: 0px; left: 0px; transform-origin: top; } .eff-23 .img-block-bottom { bottom: 0px; left: 0px; transform-origin: bottom; }
Now we can see the same part of the image both on the top and bottom blocks, so we move the image in the bottom block up 50% up so that its bottom part can be seen:
.eff-23 .img-block-bottom img { transform: translate(0, -50%); }
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
.eff-23 .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.3s; }
The internal .caption elements retain default styles.
Styling .overlay: I told about the creation of isosceles triangles in effect # 19.
.eff-23 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.1s; } .eff-23 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
We collect effect.
Compress the blocks with pictures to the edges of the block with effects:
.eff-23:hover .img-block { transform: scaleY(0); transition-delay: 0.2s; }
Remove .overlay:
.eff-23:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-23:hover .overlay .icon { opacity: 0; }
Return the .caption opacity:
.eff-23:hover .caption { opacity: 1; transition-delay: 0s; }
Effect # 24
Example
To create this effect, we need to supplement the default html structure with four blocks with pictures inside and a block with an icon:
<div class="effect eff-24"> <div class="img-block img-block-1"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-2"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-3"> <img src="img/ef24.jpg" alt="Effect #24" /> </div> <div class="img-block img-block-4"> <img src="img/ef24.jpg" alt="Effect #24" /> </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>
To create such an effect of a rising “curtain”, you need to take four blocks and place the same picture in them. The height of each block is a quarter of the height of the block with the effect:
.eff-24 .img-block { width: 100%; height: 25%; position: absolute; overflow: hidden; left: 0px; }
Each block is 25% lower than the previous one, and the image in each next block rises by 25% relative to the position of the picture in the previous block (for more details on such an organization of blocks and pictures, see effect description # 7-9). Since, when hovering, the fourth block goes up and hides under the third, then they both go even higher and hide under the second, and then all three - under the first, the largest z-index will be in the first block, and the smallest - in the fourth. Here are the styles for all four blocks and their images:
.eff-24 .img-block-1 { top: 0px; z-index: 5; transition: all 0.15s linear 0s; } .eff-24 .img-block-2 { top: 25%; z-index: 4; transition: all 0.3s linear 0s; } .eff-24 .img-block-2 img { transform: translateY(-25%); } .eff-24 .img-block-3 { top: 50%; z-index: 3; transition: all 0.45s linear 0s; } .eff-24 .img-block-3 img { transform: translateY(-50%); } .eff-24 .img-block-4 { top: 75%; z-index: 2; transition: all 0.6s linear 0s; } .eff-24 .img-block-4 img { transform: translateY(-75%); }
Now let's style .caption. We make the block transparent so that while the pictures are loaded, the .caption is not visible:
.eff-24 .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.6s; }
The internal .caption elements retain default styles.
Styling .overlay. In more detail about drawing up of isosceles triangles I told in effect # 19.
.eff-24 .overlay { position: absolute; width: 0px; height: 0px; bottom: 0px; left: 0px; z-index: 10; border: 150px solid transparent; border-bottom: 50px solid rgba(255,255,255,0.6); transition: all 0.2s linear 0.5s; } .eff-24 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 17px; left: -18px; }
We collect effect.
The task is to remove all the blocks with images so as to hide even the very first block outside the block with the effect. Thus, we will raise them all to 25% above the upper edge of the block with the effect:
.eff-24:hover .img-block { top: -25%; }
The “curtain effect” is achieved by a combination of the time allotted for the animation (we wrote it above) and the rise delay:
.eff-24:hover .img-block-3 { transition-delay: 0.15s; } .eff-24:hover .img-block-2 { transition-delay: 0.3s; } .eff-24:hover .img-block-1 { transition-delay: 0.45s; }
Remove .overlay:
.eff-24:hover .overlay { border-bottom: 0px solid rgba(255,255,255,0.6); transition-delay: 0s; } .eff-24:hover .overlay .icon { opacity: 0; }
Making .caption opaque:
.eff-24:hover .caption { opacity: 1; transition-delay: 0s; }
Effect # 25
Example
To create this effect, a block with an icon and three blocks are added to the default html structure, which will appear alternately:
<div class="effect eff-25"> <img src="img/ef25.jpg" alt="Effect #25" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash flash-1"></div> <div class="flash flash-2"></div> <div class="flash flash-3"></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>
Let's start with the styles for .fash blocks. There are three of them, they occupy one third of the block height with the effect of each:
.eff-25 .flash { position: absolute; width: 100%; height: 100px; opacity: 0; left: 0px; background: rgba(255,255,255,0.4); } .eff-25 .flash-1 { top: 0px; } .eff-25 .flash-2 { top: 100px; } .eff-25 .flash-3 { top: 200px; }
Now we are styling .overlay, in which the width first changes, and it seems to stretch, and then the position relative to the block, as it slides to the left, beyond the limits of the block with the effect:
.eff-25 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-25 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-25 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
Hide .caption over the bottom edge of the block with an effect and give it a more complex transition-timing-function:
.eff-25 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.3s cubic-bezier(0.16, 0.32, 0, 0.86) 0s; }
Styles of the .caption elements remain defaulted.
Now our task is to make so that when hovering first one .fash appears and disappears, and only then the next one appears. To do this, we need to use the animation property and its attendant @keyframes. Let's start with @keyframes: it is needed in order to set the name of the future animation and key points that the animated element passes in its movement. .Flash has three key points:
- initial in which it is transparent
- the average in which it appears
- final in which it is again transparent
Thus, we can specify the following @keyframes, where flash is the name of the animation:
@keyframes flash { from {opacity: 0;} 50% {opacity: 1;} to {opacity: 0;} }
Now collect the effect.
When you hover, we need to run the animation. For this we use the animation property. Here we use three parameters: the name, the time required for all key points of each flash to pass, and animation-timing-function, similar to transition-timing-function.
.eff-25:hover .flash { animation: flash 0.3s linear; }
Now, if you look at what happened, you will see that all .fash flashes at the same time and goes out, so we need to use another animation parameter — a delay that works like a delay for a transition:
.eff-25:hover .flash-1 { animation-delay: 0.45s; } .eff-25:hover .flash-2 { animation-delay: 0.55s; } .eff-25:hover .flash-3 { animation-delay: 0.65s; }
Add “stretch” and disappear .overlay:
.eff-25:hover .overlay { width: 170px; left: -190px; }
And raise .caption:
.eff-25:hover .caption { top: 0px; transition-delay: 0.8s; }
Effect # 26
Example
To create this effect, you need to add to the default structure a block with an icon and a block strip, which will be visible when you hover:
<div class="effect eff-26"> <img src="img/ef26.jpg" alt="Effect #26" /> <div class="overlay"> <div class="icon"></div> </div> <div class="flash"></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>
Let's start with the styling strip. This is a narrow long block that will fall and rise when you hover. It is rendered to the starting point of the animation: up, beyond the block with the effect.
.eff-26 .flash { position: absolute; left: -200px; top: -200px; background-color: rgba(255,255,255,0.6); width: 590px; height: 100px; transform: rotate(-25deg); }
Now let's set @keyframes to determine the key points of the animation (more about this is written in the effect # 25):
@keyframes flash-movement { from {top: -200px;} to {top: 400px;} }
Set styles for .overlay, which is also discussed in more detail in effect # 25:
.eff-26 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-26 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-26 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
And set transparency for .caption:
.eff-26 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; }
Internal .caption elements still have default styles.
We collect effect.
We start animation of the block with a strip. As you can see, more parameters of the animation property are used here than in the past effect. In addition to the name of the animation, time and animation-timing-function is also used:
- iteration-count - how many times will we play the animation. In this case - twice: top to bottom and bottom to top.
- animation-direction - indicates whether the element will pass key points in the direct order (from from to to) or in reverse (from to to from). The value alternate means that in every odd loss the animation will go in direct order, and in each even one - in reverse, which is why the first time the bar moves from top to bottom, and the second time - from bottom to top.
.eff-26:hover .flash { animation: flash-movement 0.4s linear 0.45s 2 alternate; }
Remove .overlay:
.eff-26:hover .overlay { width: 170px; left: -190px; }
Change the transparency .caption:
.eff-26:hover .caption { opacity: 1; transition-delay: 0.8s; }
Effect # 27
Example
To work with this effect, you must add a default html-structure with a block with an icon and a block with a circle:
<div class="effect eff-27"> <img src="img/ef27.jpg" alt="Effect #27" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"> <div class="half-circle half-circle-left"></div> <div class="half-circle half-circle-right"></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>
Let's start with a block with a circle that appears when hovering. Styles for the block itself:
.eff-27 .circle { width: 100px; height: 100px; position: absolute; top: 100px; left: 100px; opacity: 0; }
When hovering the circle breaks into two halves in order to accomplish this, we will assemble it from two semicircular blocks, which we will then move away from each other:
.eff-27 .circle .half-circle { background: rgba(255,255,255,0.6); width: 50px; height: 100px; position: absolute; } .eff-27 .circle .half-circle-left { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } .eff-27 .circle .half-circle-right { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; }
Now create @keyframes for each of the semicircular blocks. I wrote about @keyframes in detail in effect # 25. As you can see, each of the semicircles passes three key points:
- the semicircle is in its default location and is part of the circle
- it moves to the side, decreases in size and turns into a full circle
- flies out of the block with effect
@keyframes half-circle-left { from { top: 0px; left: 0px; border-radius: 100px 0px 0px 100px; } 20% { top: 25px; left: -15px; height: 50px; border-radius: 100px; } to { top: 0px; left: -500px; height: 50px; border-radius: 100px; } } @keyframes half-circle-right { from { top: 0px; right: 0px; border-radius: 0px 100px 100px 0px; } 20% { top: 25px; right: -15px; height: 50px; border-radius: 100px; } to { top: 0px; right: -500px; height: 50px; border-radius: 100px; } }
Set styles for .overlay, which is also discussed in more detail in effect # 25:
.eff-27 .overlay { position: absolute; width: 140px; height: 40px; top: 130px; left: 0px; background: rgba(255,255,255,0.6); transition: width 0.2s linear 0s, left 0.15s linear 0.2s; } .eff-27 .overlay:after { content: " "; display: block; position: absolute; width: 0px; top: 0; left: 100%; border: 20px solid transparent; border-left: 20px solid rgba(255,255,255,0.6); } .eff-27 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 9px; left: 83%; z-index: 10; }
Remove down .caption
.eff-27 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
The remaining .caption elements still have default styles.
We collect effect.
First, we change the transparency of the block with a circle:
.eff-27:hover .circle { opacity: 1; transition-delay: 0.4s; }
Then we call the animations of each of the semicircles. In addition to the parameters discussed in effects # 25-26, we use one new parameter here: animation-fill-mode. This setting determines which styles are applied to animated elements when the animation is finished or stopped. By default, after the animation, the elements return to the position specified by the first key point @keyframes, which we absolutely do not need here, otherwise a white circle will appear right behind the .caption. The forwards value is necessary in order for the elements to remain in the position specified by the last key point of @keyframes, that is, outside the block with the effect:
.eff-27:hover .half-circle-left { animation: half-circle-left 1s linear 0.55s forwards; } .eff-27:hover .half-circle-right { animation: half-circle-right 1s linear 0.55s forwards; }
Now remove the .overlay:
.eff-27:hover .overlay { width: 170px; left: -190px; }
And push up .caption:
.eff-27:hover .caption { top: 0px; transition-delay: 1s; }
Effect # 28
Example
To work with this effect, you need to complement the default html-structure with a block with an icon and a block with a semicircular notch, which becomes visible when you hover:
<div class="effect eff-28"> <img src="img/ef28.jpg" alt="Effect #28" /> <div class="overlay"> <div class="icon"></div> </div> <div class="circle"></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>
Let's start with the block with the notch. By itself, this block is a large circle with a border whose width is 3px, located so that only part of it is within the block with the effect. To fill the entire space of the block with the effect on the left side of the circle, let's give it a large semi-transparent shadow:
.eff-28 .circle { width: 600px; height: 600px; border: 3px solid rgba(255,255,255,0.6); -webkit-border-radius: 300px; border-radius: 300px; position: absolute; bottom: -50px; left: 50px; box-shadow: 0px 0px 235px 1000px rgba(255,255,255,0.5); opacity: 0; transition: width 0.4s linear 0s, height 0.4s linear 0s, opacity 0.15s linear 0s; }
Now reduce the size of the .caption to zero:
.eff-28 .caption { position: absolute; top: 0; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transform: scale(0); transition: all 0.2s linear 0s; }
Other .caption elements still have default styles.
It remains only to stylize the block with the icon. Here are his basic styles:
.eff-28 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-28 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; }
The task is to prescribe him the “bouncing” animation, and for this we need this @keyframes (for more information about @keyframes, see effect # 25). The element passes five key points:
- Initial position
- Hits the bottom edge of the block with effect
- Returns to its original position
- Hits the top edge of the block with effect
- Accelerating, flies over the edge of the block with the effect
@keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
We collect effect.
First, apply the animation to the block with the icon. Animation was discussed in detail in effect # 25, the animation-fill-mode parameter in effect # 27:
.eff-28:hover .overlay { animation: bounce 0.5s linear forwards; }
Then, changing the transparency, width and height of the element with the notch, we create the illusion of movement of this block:
.eff-28:hover .circle { opacity: 1; width: 400px; height: 400px; transition-delay: 0.35s; }
And finally, we increase .caption:
.eff-28:hover .caption { transform: scale(1); transition-delay: 0.9s; }
Effect # 29
Example
For this effect, it is necessary to supplement the default html structure with a block with an icon and a square block that appears when you hover:
<div class="effect eff-29"> <img src="img/ef29.jpg" alt="Effect #29" /> <div class="overlay"> <div class="icon"></div> </div> <div class="square"></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>
Let's start with a square block. There are very few initial styles in this block, because the main styles, including the transition, will be applied to it only during hover:
.eff-29 .square { width: 84%; height: 84%; position: absolute; top: 7%; left: 7%; border: 3px solid rgba(255,255,255,0.6); border-radius: 10px; transform: scale(0); opacity: 0; }
Move the .caption to the top, outside the block with the effect:
.eff-29 .caption { position: absolute; top: -100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; }
Internal .caption elements retain default styles.
We stylize a block with an icon completely similar to the same block from effect # 28, where I looked at these styles in more detail, here I just bring the styles themselves and @keyframes:
.eff-29 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-29 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
We collect effect.
First we add the styles for the square block. Increase it in size, make it opaque and add a shadow to create the illusion of having a background beyond the boundaries of the square. Why we add a transition only when hovering - because when you cancel hover, the square should immediately disappear.
.eff-29:hover .square { transform: scale(1); opacity: 1; box-shadow: 0px 0px 200px 60px rgba(255,255,255,0.4); transition: transform 0.3s linear 0.3s, opacity 0.2s linear 0.3s, box-shadow 0.2s linear 0.7s; }
Add a block animation with an icon, animation was discussed in detail in effect # 25, the animation-fill-mode parameter in effect # 27:
.eff-29:hover .overlay { animation: bounce 0.5s linear forwards; }
And omit .caption:
.eff-29:hover .caption { top: 0px; transition-delay: 0.8s; }
Effect # 30
Example
To create this effect, we need to supplement the default html structure with a block with an icon and a block with bubbles, in which you need to create as many bubble blocks as you want in your effect:
<div class="effect eff-30"> <img src="img/ef30.jpg" alt="Effect #30" /> <div class="overlay"> <div class="icon"></div> </div> <div class="bubbles"> <div class="bubble"></div> <div class="bubble bubble-2"></div> <div class="bubble bubble-3"></div> <div class="bubble bubble-4"></div> <div class="bubble bubble-5"></div> <div class="bubble bubble-6"></div> <div class="bubble bubble-7"></div> <div class="bubble bubble-8"></div> <div class="bubble bubble-9"></div> <div class="bubble bubble-10"></div> <div class="bubble bubble-11"></div> <div class="bubble bubble-12"></div> <div class="bubble bubble-13"></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>
. #28, , @keyframes:
.eff-30 .overlay { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; border-radius: 500px; background: rgba(255,255,255,0.6); } .eff-30 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 39px; left: 33px; } @keyframes bounce { from {top: 100px;} 25% {top: 200px;} 50% {top: 100px;} 75% {top: 0px;} to {top: -200px;} }
.caption :
.eff-30 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.4s linear 0s; }
.caption .
— .
:
.eff-30 .bubbles { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
( #10):
.eff-30 .bubbles .bubble { width: 43px; height: 43px; position: absolute; top: 100%; background: radial-gradient(circle at center center, rgba(255,255,255,0) 25%, rgba(255,255,255,0.7) ); border-radius: 300px; }
, :
.eff-30 .bubbles .bubble-2 { left: 20px; } .eff-30 .bubbles .bubble-3 { left: 60px; } .eff-30 .bubbles .bubble-4 { left: 90px; } .eff-30 .bubbles .bubble-5 { left: 120px; } .eff-30 .bubbles .bubble-6 { left: 150px; } .eff-30 .bubbles .bubble-7 { left: 250px; } .eff-30 .bubbles .bubble-8 { left: 300px; } .eff-30 .bubbles .bubble-9 { left: 190px; } .eff-30 .bubbles .bubble-10 { left: 220px; } .eff-30 .bubbles .bubble-11 { left: 270px; } .eff-30 .bubbles .bubble-12 { left: 45px; } .eff-30 .bubbles .bubble-13 { left: 15px; }
@keyframes ( #25) , :
@keyframes bubble { from { top: 100%; } to { top: -100%; } }
.
, animation #25, animation-fill-mode #27:
.eff-30:hover .overlay { animation: bounce 0.6s linear forwards; }
. . , , #25 , animation-iteration-count infinite, , . , :
.eff-30:hover .bubbles .bubble { animation: bubble 9s infinite; }
, , :
.eff-30:hover .bubbles .bubble-2 { animation-delay: 2s; } .eff-30:hover .bubbles .bubble-3 { animation-delay: 6s; } .eff-30:hover .bubbles .bubble-4 { animation-delay: 3.5s; } .eff-30:hover .bubbles .bubble-5 { animation-delay: 4s; } .eff-30:hover .bubbles .bubble-6 { animation-delay: 7.2s; } .eff-30:hover .bubbles .bubble-7 { animation-delay: 1s; } .eff-30:hover .bubbles .bubble-8 { animation-delay: 2.6s; } .eff-30:hover .bubbles .bubble-9 { animation-delay: 5s; } .eff-30:hover .bubbles .bubble-10 { animation-delay: 6.4s; } .eff-30:hover .bubbles .bubble-11 { animation-delay: 8s; } .eff-30:hover .bubbles .bubble-12 { animation-delay: 5.3s; } .eff-30:hover .bubbles .bubble-13 { animation-delay: 8.5s; }
.caption:
.eff-30:hover .caption { top: 0px; transition-delay: 0.7s; }
, , !
Source: https://habr.com/ru/post/274007/
All Articles