Intermediate CSS3 Hover Effects. Step by step tutorial. Part 2
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 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.
Effect # 12
Example
Since it is impossible to do this so that the gradient from the default state with the transition smoothly transitions to another gradient (the transition in this case simply does not work), for this effect we will need to add two blocks with gradients to the default html structure, and a block with .overlay and icon too:
Set the first gradient. In more detail how to make linear gradients, I wrote for effect # 11.
And the second gradient that will appear when you hover:
Now let's hide the .caption, which will have to move from left to right when hovering
Other .caption elements have default styles.
The .overlay block with the icon is explained in more detail in the description of effect # 10:
Now collect the effect.
First, the first gradient fades:
Simultaneously with this, we make a block with a second gradient opaque:
Remove the .overlay and icon:
And leaves .caption:
Effect # 13
Example
For this effect, the default html structure will be supplemented only by a block with an icon:
First of all, we change the styles for the image. In order for us to have the opportunity, when hovering, to “alienate” the picture from us, we must first “zoom in”, which is achieved by increasing:
Further we give styles to an icon and .overlay. The icon gives an additional transition so that it disappears after 0.1s after the animation starts (set to hover), and returned immediately when hover is canceled:
Set styles for .caption and its elements: each needs its own transition, since they appear with different transition-delay values ​​(we specify the delay value separately on hover), and also set the transparency value to 0.
We collect effect.
We give away the image, reducing it to the default size:
Squeeze the substrate to the center and make the icon disappear:
Making the .caption elements visible:
Effect # 14
Example
For this effect, we supplement the default html structure with a semitransparent block with an icon:
First, we stylize the picture. So that it can be moved in this way, we add as many additional pixels to the width as we plan to move, and to the height, respectively, so as not to disturb the proportions. In advance we shift the image by the added number of pixels in the direction opposite to the movement in order to move it from left to right. If we do not shift, we get the movement from right to left.
Now we will define a translucent block with an icon, the need for a transition for which I described in more detail for effect # 13:
We put down styles for elements .caption. This time, the transition-timing-function value will be more difficult than usual to create a bounce effect, in addition, we shift them up to the height from which they are to “fall”:
We collect effect.
Shift the picture from left to right. If we needed to shift it from right to left, here we would specify the required number of pixels in the first parameter, and in the default value, we would put 0px in this parameter:
Further reduce the substrate:
And omit the .caption elements:
Effect # 15
Example
For this effect, we supplement the default html structure with a semitransparent block with an icon:
Stylize the picture. In this effect, we move it from left to right, and from top to bottom, and increase. Thus, we increase its width and height by the number of pixels by which we are going to move horizontally and vertically (it must be equal, otherwise the proportions of the image will be distorted), then we shift the picture itself to the left and up by as many pixels as possible. move right and down (if we don’t do this, but indicate the number of pixels on the hover, we can move the image from bottom to top and from right to left):
Now we will define a translucent block with an icon, the need for a transition for which I described in more detail for effect # 13:
And we will set styles for .caption elements. Set the value of the transition-timing-function to create a bounce-effect, in addition, we shift them to the left, outside the block with the effect:
We collect effect.
Shift the picture and increase. If we needed to move it to the left and up, we would put the necessary number of pixels in both translate parameters, and in the default value we would put zero values:
Reduce the substrate:
And push the .caption elements into place:
Effect # 16
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
Styling the underlay with the icon:
Styles for .triangle-set:
Now go directly to the triangles. To create an equilateral triangle, you need to take a block, give it a width and height of 0px, give it a transparent border of such width as your tiger should be, and then set a color border of the same width in one of the four directions to form a triangle in the right side.
Here are the common styles for all the triangles of the effect. So far only transparent borders are set here:
Now add styles for each of the triangles. For the triangle “directed” down, set the color border-top:
For “directed” to the right, up and left, we also set the border, respectively, to the direction:
Hide .caption behind the left edge of the block with the effect:
Styles of elements .caption remain default.
We collect effect.
First .overlay disappears:
Then one by one triangles begin to appear:
And, finally, leaves .caption:
Effect # 17
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
Styling the .overlay and icon:
Styles for .triangle-set:
About how exactly equilateral triangles are composed, I wrote more in detail in effect # 16. In this case, we also expand each triangle 90 degrees:
And styles for each triangle:
It remains to hide .caption:
Elements of .caption remain default styles.
We collect effect.
First remove .overlay:
We show and unfold the triangles:
And .caption appears:
Effect # 18
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
Stylize the underlay and icon:
Add triangles. For details on how to create triangles, I wrote to the effect # 16. First styles for .triangle-set:
Next, our task is to reduce the triangles. Scale does not help here: the width and height of the blocks is still 0px, so we will reduce the size by changing the width of the border:
And hide .caption down, behind the edge of the block with the effect
The elements of .caption styles remain default.
We collect effect.
Remove .overlay:
Change the transparency and size of triangles:
And push up .caption:
Effect # 19
Example
As for the previous three effects, we supplement the default html structure with a semitransparent block with an icon and a block with triangles:
First of all, let's style the hexagon. To get a hexagon, it must be disassembled into three parts: a rectangle in the middle and two triangles, upper and lower. I have already talked about how to make simple equilateral triangles in effect # 16, but in this case we will need a slightly more complicated version. To create an isosceles triangle, it is enough to give it a transparent border of one size, and the visible border is another (as we remember, the visible border controls the height of the triangle):
And icon:
Now apply this knowledge to create four triangles appearing on hover.
Styles for .triangle-set:
Styles for triangles. Now their visible .border are 0px, I described this in more detail in effect # 18:
Hiding .caption:
For other .caption elements, styles remain default.
We collect effect.
Hiding .overlay, it spins and becomes transparent. Scroll it to such a degree that the rotation is neither too fast nor too slow:
Now triangles appear:
And .caption:
Effect # 20
Example
To create this effect, we supplement the default html structure with a hexagonal block with an icon and a block with two elements that will appear in the lower right and upper left corners of the effect:
Styling .overlay. I described the creation of hexagons in more detail in effect # 19:
Styles for .triangle-set:
Now let's talk about corner blocks. As we remember, to create a triangle, we create a block with a width and height equal to 0px, make everything border transparent, except for the one that defines the direction of the triangle. In order to create blocks like this, you need to make two borders opaque, not one. For the upper left element - the left and upper border, for the lower right - lower and right, respectively. In addition, we shift each block by 100% left and right outside the block with the effect, respectively:
For .caption, it is important to designate a more complex transition-timing-function, so that .caption, as it were, jumps elastically when driving out:
Styles for .caption elements remain defaulted.
We collect effect.
Spinning .overlay, in more detail about the choice of the optimal number of degrees, I told in the effect # 19:
We push the blocks into the corners:
And push the .caption from below:
Effect # 21
Example
To create this effect, we need, in addition to the default html structure, a block with a substrate and an icon and a block with a translucent element that appears when hovering:
.overlay. #19:
.triangle. , #18, , border , #20, border, . border-left . border-left, :
.caption transition-timing-function:
.caption .
.
.overlay, , #19:
.triangle , .border-left:
.caption:
Due to the large size of the article is divided into three parts. The first part . 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.
Effect # 12
Example
Since it is impossible to do this so that the gradient from the default state with the transition smoothly transitions to another gradient (the transition in this case simply does not work), for this effect we will need to add two blocks with gradients to the default html structure, and a block with .overlay and icon too:
<div class="effect eff-12"> <img src="img/ef12.jpg" alt="Effect #12" /> <div class="overlay"> <div class="icon"></div> </div> <div class="gradient"></div> <div class="inner-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> Set the first gradient. In more detail how to make linear gradients, I wrote for effect # 11.
.eff-12 .gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 1; background: linear-gradient(60deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; } And the second gradient that will appear when you hover:
.eff-12 .inner-gradient { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 70%); transition: all 0.25s linear 0.2s; } Now let's hide the .caption, which will have to move from left to right when hovering
.eff-12 .caption { position: absolute; top: 0px; left: 100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Other .caption elements have default styles.
The .overlay block with the icon is explained in more detail in the description of effect # 10:
.eff-12 .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-12 .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 collect the effect.
First, the first gradient fades:
.eff-12:hover .gradient { opacity: 0; } Simultaneously with this, we make a block with a second gradient opaque:
.eff-12:hover .inner-gradient { opacity: 1; } Remove the .overlay and icon:
.eff-12:hover .overlay { transform: scaleX(0); } .eff-12:hover .overlay .icon { opacity: 0; transition-delay: 0s; } And leaves .caption:
.eff-12:hover .caption { left: 0px; transition-delay: 0.35s; } Effect # 13
Example
For this effect, the default html structure will be supplemented only by a block with an icon:
<div class="effect eff-13"> <img src="img/ef13.jpg" alt="Effect #13" /> <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> First of all, we change the styles for the image. In order for us to have the opportunity, when hovering, to “alienate” the picture from us, we must first “zoom in”, which is achieved by increasing:
.eff-13 img { min-width: 100%; min-height: 100%; transform: scale(1.3); transition: all 0.15s linear 0s; } Further we give styles to an icon and .overlay. The icon gives an additional transition so that it disappears after 0.1s after the animation starts (set to hover), and returned immediately when hover is canceled:
.eff-13 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-13 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; opacity: 1; transition: all 0.01s linear 0s; } Set styles for .caption and its elements: each needs its own transition, since they appear with different transition-delay values ​​(we specify the delay value separately on hover), and also set the transparency value to 0.
.eff-13 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-13 .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-13 .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-13 .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-13 .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; } We collect effect.
We give away the image, reducing it to the default size:
.eff-13:hover img { transform: scale(1); } Squeeze the substrate to the center and make the icon disappear:
.eff-13:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-13:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } Making the .caption elements visible:
.eff-13:hover .caption h4, .eff-13:hover .caption p, .eff-13:hover .caption a { opacity: 1; } .eff-13:hover .caption h4 { transition-delay: 0.5s; } .eff-13:hover .caption p { transition-delay: 0.4s; } .eff-13:hover .caption a { transition-delay: 0.3s; } Effect # 14
Example
For this effect, we supplement the default html structure with a semitransparent block with an icon:
<div class="effect eff-14"> <img src="img/ef14.jpg" alt="Effect #14" /> <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> First, we stylize the picture. So that it can be moved in this way, we add as many additional pixels to the width as we plan to move, and to the height, respectively, so as not to disturb the proportions. In advance we shift the image by the added number of pixels in the direction opposite to the movement in order to move it from left to right. If we do not shift, we get the movement from right to left.
.eff-14 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,0); transition: all 0.15s linear 0s; } Now we will define a translucent block with an icon, the need for a transition for which I described in more detail for effect # 13:
.eff-14 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-14 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; } We put down styles for elements .caption. This time, the transition-timing-function value will be more difficult than usual to create a bounce effect, in addition, we shift them up to the height from which they are to “fall”:
.eff-14 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-14 .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; top: -200px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .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-14 .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; position: relative; top: -250px; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } .eff-14 .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; top: -300px; position: relative; text-decoration: none; transition: all 0.2s cubic-bezier(0.41, 1.43, 0.19, 0.79) 0s; } We collect effect.
Shift the picture from left to right. If we needed to shift it from right to left, here we would specify the required number of pixels in the first parameter, and in the default value, we would put 0px in this parameter:
.eff-14:hover img { transform: translate(0,0); } Further reduce the substrate:
.eff-14:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-14:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } And omit the .caption elements:
.eff-14:hover .caption h4, .eff-14:hover .caption p, .eff-14:hover .caption a { top: 0px; } .eff-14:hover .caption h4 { transition-delay: 0.5s; } .eff-14:hover .caption p { transition-delay: 0.4s; } .eff-14:hover .caption a { transition-delay: 0.3s; } Effect # 15
Example
For this effect, we supplement the default html structure with a semitransparent block with an icon:
<div class="effect eff-15"> <img src="img/ef15.jpg" alt="Effect #15" /> <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> Stylize the picture. In this effect, we move it from left to right, and from top to bottom, and increase. Thus, we increase its width and height by the number of pixels by which we are going to move horizontally and vertically (it must be equal, otherwise the proportions of the image will be distorted), then we shift the picture itself to the left and up by as many pixels as possible. move right and down (if we don’t do this, but indicate the number of pixels on the hover, we can move the image from bottom to top and from right to left):
.eff-15 img { min-width: 100%; min-height: 100%; height: calc(100% + 30px); width: calc(100% + 30px); transform: translate(-30px,-30px) scale(1); transition: all 0.15s linear 0s; } Now we will define a translucent block with an icon, the need for a transition for which I described in more detail for effect # 13:
.eff-15 .overlay { width: 100%; height: 45px; position: absolute; left: 0; bottom: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-15 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 11px; left: 45%; transition: all 0.01s linear 0s; } And we will set styles for .caption elements. Set the value of the transition-timing-function to create a bounce-effect, in addition, we shift them to the left, outside the block with the effect:
.eff-15 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; } .eff-15 .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; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .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-15 .caption p { width: 100%; max-width: -webkit-calc(80% - 20px); max-width: -o-calc(80% - 20px); max-width: -moz-calc(80% - 20px); max-width: -ms-calc(80% - 20px); 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; position: relative; left: 400px; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } .eff-15 .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; left: 400px; position: relative; text-decoration: none; transition: all 0.3s cubic-bezier(0.05, 1.01, 0.04, 1.02) 0s; } We collect effect.
Shift the picture and increase. If we needed to move it to the left and up, we would put the necessary number of pixels in both translate parameters, and in the default value we would put zero values:
.eff-15:hover img { transform: translate(0px,0px) scale(1.1); } Reduce the substrate:
.eff-15:hover .overlay { transform: scaleX(0); transition-delay: 0.1s; } .eff-15:hover .overlay .icon { transition-delay: 0.1s; opacity: 0; } And push the .caption elements into place:
.eff-15:hover .caption h4, .eff-15:hover .caption p, .eff-15:hover .caption a { left: 0px; } .eff-15:hover .caption h4 { transition-delay: 0.3s; } .eff-15:hover .caption p { transition-delay: 0.35s; } .eff-15:hover .caption a { transition-delay: 0.4s; } Effect # 16
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
<div class="effect eff-16"> <img src="img/ef16.jpg" alt="Effect #16" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></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> Styling the underlay with the icon:
.eff-16 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-16 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Styles for .triangle-set:
.eff-16 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Now go directly to the triangles. To create an equilateral triangle, you need to take a block, give it a width and height of 0px, give it a transparent border of such width as your tiger should be, and then set a color border of the same width in one of the four directions to form a triangle in the right side.
Here are the common styles for all the triangles of the effect. So far only transparent borders are set here:
.eff-16 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transition: all 0.2s linear 0s; } Now add styles for each of the triangles. For the triangle “directed” down, set the color border-top:
.eff-16 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } For “directed” to the right, up and left, we also set the border, respectively, to the direction:
.eff-16 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-16 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-16 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } Hide .caption behind the left edge of the block with the effect:
.eff-16 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } Styles of elements .caption remain default.
We collect effect.
First .overlay disappears:
.eff-16:hover .overlay { right: -45px; } .eff-16:hover .overlay .icon { opacity: 0; } Then one by one triangles begin to appear:
.eff-16:hover .triangle { opacity: 1; } .eff-16:hover .triangle-1 { transition-delay: 0.2s; } .eff-16:hover .triangle-2 { transition-delay: 0.55s; } .eff-16:hover .triangle-3 { transition-delay: 0.4s; } .eff-16:hover .triangle-4 { transition-delay: 0.35s; } And, finally, leaves .caption:
.eff-16:hover .caption { left: 0px; transition-delay: 0.6s; } Effect # 17
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
<div class="effect eff-17"> <img src="img/ef17.jpg" alt="Effect #17" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></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> Styling the .overlay and icon:
.eff-17 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-17 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Styles for .triangle-set:
.eff-17 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } About how exactly equilateral triangles are composed, I wrote more in detail in effect # 16. In this case, we also expand each triangle 90 degrees:
.eff-17 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; opacity: 0; transform: rotate(-90deg); transition: all 0.2s linear 0s; } And styles for each triangle:
.eff-17 .triangle-1 { border-top: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-17 .triangle-2 { border-right: 150px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-17 .triangle-3 { border-bottom: 150px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-17 .triangle-4 { border-left: 150px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } It remains to hide .caption:
.eff-17 .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 of .caption remain default styles.
We collect effect.
First remove .overlay:
.eff-17:hover .overlay { right: -45px; } .eff-17:hover .overlay .icon { opacity: 0; } We show and unfold the triangles:
.eff-17:hover .triangle { opacity: 1; transform: rotate(0deg); } .eff-17:hover .triangle-1 { transition-delay: 0.2s; } .eff-17:hover .triangle-2 { transition-delay: 0.35s; } .eff-17:hover .triangle-3 { transition-delay: 0.4s; } .eff-17:hover .triangle-4 { transition-delay: 0.55s; } And .caption appears:
.eff-17:hover .caption { opacity: 1; transition-delay: 0.6s; } Effect # 18
Example
For this effect, we supplement the default html structure with a block with a substrate and a block with triangular sectors:
<div class="effect eff-18"> <img src="img/ef18.jpg" alt="Effect #18" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></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> Stylize the underlay and icon:
.eff-18 .overlay { width: 45px; height: 100%; position: absolute; right: 0; top: 0; background: rgba(255,255,255,0.6); transition: all 0.15s linear 0s; } .eff-18 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 46%; left: 6px; } Add triangles. For details on how to create triangles, I wrote to the effect # 16. First styles for .triangle-set:
.eff-18 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Next, our task is to reduce the triangles. Scale does not help here: the width and height of the blocks is still 0px, so we will reduce the size by changing the width of the border:
.eff-18 .triangle { position: absolute; width: 0px; height: 0px; opacity: 0; border: 5px solid transparent; transition: opacity 0.15s linear 0s, border-width 0.35s linear 0.1s; } And hide .caption down, behind the edge of the block with the effect
.eff-18 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s linear 0s; } The elements of .caption styles remain default.
We collect effect.
Remove .overlay:
.eff-18:hover .overlay { right: -45px; } .eff-18:hover .overlay .icon { opacity: 0; } Change the transparency and size of triangles:
.eff-18:hover .triangle { opacity: 1; border-width: 150px; } And push up .caption:
.eff-18:hover .caption { top: 0px; transition-delay: 0.35s } Effect # 19
Example
As for the previous three effects, we supplement the default html structure with a semitransparent block with an icon and a block with triangles:
<div class="effect eff-19"> <img src="img/ef19.jpg" alt="Effect #19" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></div> <div class="triangle triangle-3"></div> <div class="triangle triangle-4"></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> First of all, let's style the hexagon. To get a hexagon, it must be disassembled into three parts: a rectangle in the middle and two triangles, upper and lower. I have already talked about how to make simple equilateral triangles in effect # 16, but in this case we will need a slightly more complicated version. To create an isosceles triangle, it is enough to give it a transparent border of one size, and the visible border is another (as we remember, the visible border controls the height of the triangle):
.eff-19 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-19 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-19 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } And icon:
.eff-19 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } Now apply this knowledge to create four triangles appearing on hover.
Styles for .triangle-set:
.eff-19 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Styles for triangles. Now their visible .border are 0px, I described this in more detail in effect # 18:
.eff-19 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-19 .triangle-1 { border-top: 0px solid rgba(255,255,255,0.6); top: 0px; left: 0px; } .eff-19 .triangle-2 { border-right: 0px solid rgba(255,255,255,0.6); top: 0px; right: 0px; } .eff-19 .triangle-3 { border-bottom: 0px solid rgba(255,255,255,0.6); bottom: 0px; right: 0px; } .eff-19 .triangle-4 { border-left: 0px solid rgba(255,255,255,0.6); bottom: 0px; left: 0px; } Hiding .caption:
.eff-19 .caption { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; text-align: center; color: white; opacity: 0; transition: all 0.2s linear 0s; } For other .caption elements, styles remain default.
We collect effect.
Hiding .overlay, it spins and becomes transparent. Scroll it to such a degree that the rotation is neither too fast nor too slow:
.eff-19:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-19:hover .overlay .icon { opacity: 0; } Now triangles appear:
.eff-19:hover .triangle { opacity: 1; transition-delay: 0.2s; } .eff-19:hover .triangle-1 { border-top: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-2 { border-right: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-3 { border-bottom: 30px solid rgba(255,255,255,0.7); } .eff-19:hover .triangle-4 { border-left: 30px solid rgba(255,255,255,0.7); } And .caption:
.eff-19:hover .caption { opacity: 1; transition-delay: 0.3s; } Effect # 20
Example
To create this effect, we supplement the default html structure with a hexagonal block with an icon and a block with two elements that will appear in the lower right and upper left corners of the effect:
<div class="effect eff-20"> <img src="img/ef20.jpeg" alt="Effect #20" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle-set"> <div class="triangle triangle-1"></div> <div class="triangle triangle-2"></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> Styling .overlay. I described the creation of hexagons in more detail in effect # 19:
.eff-20 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-20 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-20 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-20 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } Styles for .triangle-set:
.eff-20 .triangle-set { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; } Now let's talk about corner blocks. As we remember, to create a triangle, we create a block with a width and height equal to 0px, make everything border transparent, except for the one that defines the direction of the triangle. In order to create blocks like this, you need to make two borders opaque, not one. For the upper left element - the left and upper border, for the lower right - lower and right, respectively. In addition, we shift each block by 100% left and right outside the block with the effect, respectively:
.eff-20 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; transition: all 0.3s linear 0s; } .eff-20 .triangle-1 { border-top: 40px solid rgba(255,255,255,0.6); border-left: 40px solid rgba(255,255,255,0.6); top: 0px; left: -100%; } .eff-20 .triangle-2 { border-right: 40px solid rgba(255,255,255,0.6); border-bottom: 40px solid rgba(255,255,255,0.6); bottom: 0px; right: -100%; } For .caption, it is important to designate a more complex transition-timing-function, so that .caption, as it were, jumps elastically when driving out:
.eff-20 .caption { position: absolute; top: 100%; left: 0px; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } Styles for .caption elements remain defaulted.
We collect effect.
Spinning .overlay, in more detail about the choice of the optimal number of degrees, I told in the effect # 19:
.eff-20:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-20:hover .overlay .icon { opacity: 0; } We push the blocks into the corners:
.eff-20:hover .triangle { transition-delay: 0.2s; } .eff-20:hover .triangle-1 { left: 0px; } .eff-20:hover .triangle-2 { right: 0px; } And push the .caption from below:
.eff-20:hover .caption { top: 0px; transition-delay: 0.5s; } Effect # 21
Example
To create this effect, we need, in addition to the default html structure, a block with a substrate and an icon and a block with a translucent element that appears when hovering:
<div class="effect eff-21"> <img src="img/ef21.jpg" alt="Effect #21" /> <div class="overlay"> <div class="icon"></div> </div> <div class="triangle"></div> <div class="caption"> <h4>Title is Here</h4> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut. </p> <a class="btn" href="#" title="View More">View More</a> </div> </div> .overlay. #19:
.eff-21 .overlay { width: 100px; height: 60px; position: absolute; left: 102px; top: 119px; background: rgba(255,255,255,0.6); transition: all 0.2s linear 0s; } .eff-21 .overlay:before { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-bottom: 25px solid rgba(255,255,255,0.6); position: absolute; top: -75px; left: 0px; } .eff-21 .overlay:after { content: ""; display: block; width: 0px; height: 0px; border: 50px solid transparent; border-top: 25px solid rgba(255,255,255,0.6); position: absolute; top: 60px; left: 0px; } .eff-21 .overlay .icon { width: 35px; height: 23px; background: url('http://eisenpar.com/view-icon.png') 0 0 no-repeat; position: absolute; top: 20px; left: 32px; } .triangle. , #18, , border , #20, border, . border-left . border-left, :
.eff-21 .triangle { position: absolute; width: 0px; height: 0px; border: 150px solid transparent; border-top: 150px solid rgba(255,255,255,0.6); border-left: 500px solid rgba(255,255,255,0.6); border-bottom: 150px solid rgba(255,255,255,0.6); top: 0px; left: 0px; opacity: 0; transition: all 0.3s linear 0s; } .caption transition-timing-function:
.eff-21 .caption { position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; text-align: center; color: white; transition: all 0.2s cubic-bezier(0.29, 1.06, 0.65, 1.29) 0s; } .caption .
.
.overlay, , #19:
.eff-21:hover .overlay { transform: rotate(200deg); opacity: 0; } .eff-21:hover .overlay .icon { opacity: 0; } .triangle , .border-left:
.eff-21:hover .triangle { opacity: 1; border-left: 100px solid rgba(255,255,255,0.6); } .caption:
.eff-21:hover .caption { left: 0px; transition-delay: 0.3s; } Source: https://habr.com/ru/post/274005/
All Articles