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

  • Tutorial
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 basics work on simple examples, now I would like to move on to more complex, beautiful and interesting effects.

Due to its large size, the article is divided into three parts. The first part . The third part.

Demo materials are here . All prefixes are put in the demo, but here I will not focus on them.

Warning: effects only work in modern browsers that support CSS3 capabilities.



Effect # 12

Example

Since it is impossible to do this so that the gradient from the default state using transition smoothly transitions to another gradient (transition in this case simply does not work), for this effect we need to add two blocks with gradients to the default html structure, and a block with .overlay and icon too:

Effect #12

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


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 on 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 .caption, which will have to go 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 an 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;
}


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

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


Remove .overlay and the icon:

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


And .caption leaves:

.eff-12:hover .caption {
  left: 0px;
  transition-delay: 0.35s;
}


Effect # 13

Example

For this effect, the default html structure will be supplemented only with a block with an icon:

Effect #13

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


First of all, we change the styles for the image. In order for us to have the opportunity to “detach” the picture from us when hovering, we must first “zoom in” it, which is achieved by increasing:

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


Next we give styles to the icon and .overlay. We give the icon an additional transition so that it disappears after 0.1s after the animation starts (set to hover), and returns immediately when the 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;
}


We set the styles for .caption and its elements: everyone needs their own transition, because they appear with different transition-delay values ​​(we specify the delay value separately on the hover), and in addition, 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 the effect.

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


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, we supplement the default html structure with a translucent block with an icon:

Effect #14

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


First, we stylize the picture. So that it can be moved in this way, we add to it as many additional pixels to the width as we plan to move, and to the height, respectively, so as not to violate the proportions. In advance, we shift the picture 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 displace, we get a 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 translucent block with an icon, about which transition I needed for more details 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;
}


Set styles for .caption elements. This time the value of the transition-timing-function will be more complicated than usual to create a bounce effect, in addition, we shift them up to the height from which they have 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 the effect.

We shift the picture from left to right. If we needed to shift it from right to left, here we would indicate the required number of pixels in the first parameter, and in the default value above we would put 0px in this parameter:

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


Next, 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 translucent block with an icon:

Effect #15

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


We stylize the picture. In this effect, we move it from left to right, and from top to bottom, and increase it. Thus, we increase its width and height by the number of pixels that we are going to move horizontally and vertically (it should be equal, otherwise the proportions of the image will be distorted), then we shift the image itself to the left and up by the same number of pixels so that it can be used from there move right and down (if we don’t do this, but indicate the number of pixels on the hover, we can move the picture 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 let’s set a translucent block with an icon, about which transition I needed for more details 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 set the styles for the .caption elements. Set the value of transition-timing-function to create a bounce effect, in addition, 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;
}


We collect the effect.

We shift the picture and increase it. If we needed to move it left and up, we would put the desired number of pixels in both translate parameters and zero values ​​in the default value:

.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 complement the default html structure with a block with a substrate and a block with triangular sectors:

Effect #16

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


Stylize the background 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, set its width and height to 0px, set it to a transparent border of the same width as the height of your triangle, and then set a colored border of the same width in one of four directions to form a triangle in the right side.

Here are common styles for all effect triangles. So far, only transparent borders have been 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 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 .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 .caption elements remain default.

We collect the effect.

First .overlay disappears:

.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 .caption leaves:

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


Effect # 17

Example

For this effect, we complement the default html structure with a block with a substrate and a block with triangular sectors:

Effect #17

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


We stylize .overlay and the 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 made, I wrote in more detail in effect # 16. In this case, we also rotate 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;
}


The .caption elements remain the default styles.

We collect the effect.

First, remove .overlay:

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


We reveal and expand 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 complement the default html structure with a block with a substrate and a block with triangular sectors:

Effect #18

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


Stylize the background 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 the triangles. In more detail about how to create triangles, I wrote to 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 will not help here: the width and height of the blocks, all the same, is 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;
}


For .caption elements, the styles remain default.

We collect 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 push up .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 translucent block with an icon and a block with triangles:

Effect #19

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


First of all, we style the hexagon. To make the hexagon, it must be disassembled into three parts: a rectangle in the middle and two triangles, the upper and lower. I already talked about how to make simple equilateral triangles in effect # 16, but in this case we need a slightly more complicated version. To create an isosceles triangle, it is enough to give it a transparent border of one size, and a visible border of another (as we recall, the visible border adjusts 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 apply this knowledge to create the four triangles that appear 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 is 0px, I talked about 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 the effect.

By hiding .overlay, it spins and becomes transparent. Scroll it so many degrees 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:

Effect #20

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


Styling .overlay. About the creation of hexagons in more detail I talked about 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 all the borders transparent, except the one that determines 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 - the lower and right, respectively. In addition, we move each block 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, resiliently jumps when traveling 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.

We collect the effect.

We twist .overlay, in more detail about the choice of the optimal number of degrees, I told in effect # 19:

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


Push the blocks to 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 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 you hover:

Effect #21

Title is Here

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.

View More


Styling .overlay. About the creation of hexagons in more detail I talked about 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 .triangle. Unlike triangles, which I talked about in effect # 18, and for which you want only one border to be visible, unlike corner elements from effect # 20, built on two visible borders, this element is built on three. Using the value of border-left, we can control the size of the triangular notch on 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;
}


We hide .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 collect the effect.

We twist .overlay, in more detail about the choice of the optimal number of degrees, I told in effect # 19:

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


Make the .triangle opaque and form a triangular notch in it, changing the .border-left property:

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


And put forward .caption:

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

Also popular now: