Home Development of Websites Intermediate CSS3 Hover Effects.Step by step tutorial. Part 2

Intermediate CSS3 Hover Effects.Step by step tutorial. Part 2

by admin

This article is a logical continuation of my previous article devoted to the basics of CSS3 transitions and if in that article I showed how those basics work with some simple examples, now I’d like to go on to more complicated, beautiful and interesting effects.
Because of its large size, the article is split into three parts. First part Part Three.
Demo materials lie here All prefixes are prefixed in the demo, but I will not focus on them here.
Warning : effects only work in modern browsers that support CSS3 features.
Effect #12
Example
Since you can not make the default state of the gradient with the transition smoothly into another gradient (transition in this case simply does not work), for this effect we need to add to the default html-structure two blocks with gradients, and a block with .overlay and an 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. I wrote more about how to make linear gradients 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 appears when hovering over :

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 hide the .caption, which should come out left to right on 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 icon block is explained in more detail in effect description #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 we assemble the effect.
The first gradient fades first :

eff-12:hover .gradient {opacity: 0;}

At the same time, make the block with the second gradient opaque :

eff-12:hover .inner-gradient {opacity: 1;}

We ‘re cleaning up .overlay and icon :

eff-12:hover .overlay {transform: scaleX(0);}.eff-12:hover .overlay .icon {opacity: 0;transition-delay: 0s;}

And out comes the .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 to be able to "zoom out" a picture when hovering over it, you have to "zoom in" first, which is done by zooming in :

eff-13 img {min-width: 100%;min-height: 100%;transform: scale(1.3);transition: all 0.15s linear 0s;}

Next we give the icon and .overlay styles. Give the icon an extra transition so that it disappears 0.1s after the animation starts (set to hover), and comes right back when you cancel the hover:

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;}

We set the styles for .caption and its elements: each one needs its own transitions, because they appear with different values of transitions-delay (we specify the delay value separately on the hover), and we also set the value of transparency 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;}

Collecting the effect.
Extract the image, reducing it to its default size :

eff-13:hover img {transform: scale(1);}

Squeeze the backing 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;}

Make .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 let’s add a semi-transparent block with an icon to the default html-structure:

<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 extra pixels to the width by which we plan to move it, and to the height, respectively, so as not to disturb the proportions. In advance, we shift the picture by the added number of pixels in the direction opposite to the movement, to move it from left to right. If we don’t shift it, 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 let’s set a semi-transparent block with an icon, which I told you about in 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 set the styles for the .caption elements. This time the value of the transition-timing-function will be harder than usual to create a bounce effect, besides shifting 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;}

Collecting the effect.
Shift the picture from left to right. If we wanted to shift it from right to left, we would set the number of pixels in the first parameter here, and in the default value above we would put 0px in this parameter:

eff-14:hover img {transform: translate(0, 0);}

Next, reduce the backing :

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 let’s add a semi-transparent block with an icon to the default html-structure:

<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>

We stylize the picture. In this effect, we move it both from left to right and from top to bottom, and enlarge it. So, we increase its width and height by the number of pixels you want to move it horizontally and vertically (this must be equal, otherwise it will distort its proportions). Then we shift the image itself to the left and up by the same number of pixels so that it can be moved from there to the right and down (if we don’t do this and specify the number of pixels to hover, we can move it from bottom to top and 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 let’s set a semi-transparent block with an icon, which I told you about in 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 let’s set the styles for the .caption elements. We set the transition-timing-function to create a bounce effect, and also move 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;}

Collecting the effect.
We move the picture and enlarge it. If we wanted to move it up and left, we would put the right number of pixels in both translate parameters here, and we would put zero values in the default value :

eff-15:hover img {transform: translate(0px, 0px) scale(1.1);}

Reducing the backing :

eff-15:hover .overlay {transform: scaleX(0);transition-delay: 0.1s;}.eff-15:hover .overlay .icon {transition-delay: 0.1s;opacity: 0;}

And move 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 backing block 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 backing 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 let’s move directly to triangles. To create an equilateral triangle, you need to take a block, set its width and height to 0px, give it a transparent border as wide as your triangle should be, and then set a colored border of the same width in one of the four directions to form the triangle in the desired direction.
Here are the common styles for all effect triangles. So far, only the 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 downward pointing triangle, set the color border-top:

eff-16 .triangle-1 {border-top: 150px solid rgba(255, 255, 255, 0.6);top: 0px;left: 0px;}

For "pointing" to the right, up and left we also set the border according 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 the .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;}

The styles of the .caption elements remain default.
Collecting the effect.
The .overlay disappears first:

eff-16:hover .overlay {right: -45px;}.eff-16:hover .overlay .icon {opacity: 0;}

Then one by one the 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, the .caption comes out:

eff-16:hover .caption {left: 0px;transition-delay: 0.6s;}

Effect #17
Example
For this effect we supplement the default html structure with a backing block 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>

Stylize 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;}

I wrote more about exactly how equilateral triangles are made in effect #16. In this case, we also rotate each triangle by 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;}

All that’s left is to hide the .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;}

The .caption elements have default styles.
Collecting the effect.
Remove .overlay first:

eff-17:hover .overlay {right: -45px;}.eff-17:hover .overlay .icon {opacity: 0;}

Expose 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 the .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 backing block 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>

Styling the backing 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;}

Adding triangles. I wrote more about how to create triangles for effect #16. First, the styles for the .triangle-set:

eff-18 .triangle-set {width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;}

Next, our task is to make the triangles smaller. Scale will not help here: the width and height of the blocks are 0px anyway, 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 the .caption down, over 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 .caption elements have styles that remain default.
Collecting the effect.
Remove .overlay:

eff-18:hover .overlay {right: -45px;}.eff-18:hover .overlay .icon {opacity: 0;}

Change the transparency and size of the triangles :

eff-18:hover .triangle {opacity: 1;border-width: 150px;}

And move up the .caption:

eff-18:hover .caption {top: 0px;transition-delay: 0.35s}

Effect #19
Example
As for the previous three effects, we complement the default html-structure with a semi-transparent icon block and a triangle block :

<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, stylize the hexagon. To make a hexagon, it must be broken down into three parts: a rectangle in the middle and two triangles, an upper and a lower one. I already told you how to make simple isosceles triangles in Effect #16, but in this case we need a slightly more complicated version. To create an isosceles triangle, you just have to give it a transparent border of one size and a visible border of another (as we remember, a 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 the 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 let’s apply this knowledge to create the four triangles that appear when you 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 is 0px, I talked more about that 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 the .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;}

Other .caption elements have default styles.
Collecting the effect.
We hide the .overlay, it spins and becomes transparent. Scroll it by as many degrees as possible, so 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 the 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, supplement the default html structure with a hexagonal block with an icon and a block with two elements that will appear in the bottom right and top 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 talked more about creating hexagons 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, making all the borders transparent except the one that defines the direction of the triangle. In order to create blocks like this, we need to make two borders opaque, not one. For the top-left element, the left and top border, and for the bottom-right element, the bottom and right border, respectively. In addition, we move each block 100% to the left and right outside the effect block, 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 the .caption, as it were, bounces elastically when pulled out from below :

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 default.
Collecting the effect.
We screw the .overlay, I talked more about choosing the optimal number of degrees in effect #19:

eff-20:hover .overlay {transform: rotate(200deg);opacity: 0;}.eff-20:hover .overlay .icon {opacity: 0;}

Move 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 extend 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 background and an icon and a block with a translucent element that appears when you hover :

<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>

Styling .overlay. I talked more about creating hexagons in effect #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;}

Styling a .triangle. Unlike the triangles I covered in effect #18, which require only one border to be visible, unlike the corner elements from effect #20, which build on two visible borders, this element builds on three. With the border-left value, we can control the size of the triangular notch along the left edge. Right now we are setting the border-left value too large and therefore there is no notch :

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;}

Hide the .caption behind the left edge of the screen and set a more complex 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;}

Internal .caption elements remain with default styles.
Now we assemble the effect.
We screw the .overlay, I talked more about choosing the optimal number of degrees in effect #19:

eff-21:hover .overlay {transform: rotate(200deg);opacity: 0;}.eff-21:hover .overlay .icon {opacity: 0;}

Make .triangle opaque and shape it into a triangular notch by changing the .border-left property:

eff-21:hover .triangle {opacity: 1;border-left: 100px solid rgba(255, 255, 255, 0.6);}

And we advance the .caption:

eff-21:hover .caption {left: 0px;transition-delay: 0.3s;}

You may also like