Expanding effect for appearing text placed over an image using keyframe animation in CSS3

Expanding effect for appearing text that is used in this article consists of two parts where each part performs after another is finished. This effect is only made possible by using @keyframes rule in CSS3.

The following article is very similar to the previous articles which demonstrated different effects for appearing text that is placed over an image: Horizontal and vertical animated stretching effect for appearing text placed over an image using only CSS3 and Zoom and rotate effects for appearing text placed over an image using only CSS3.

An effect in this article cannot be achieved simply by using transition CSS property which was used in the previously mentioned articles. This effect consists of two animations where each animation starts performing when the previous one is finished.

The HTML code hasn't changed since the previous articles:

The code above is an example of one simple link with an image inside where the value of title attribute will be taken by CSS styles to show it as appearing text.

The CSS styles, which are shown in this article, are applied to each link, for example like to the one above. Now let's take one of them to explain how it works.

As was mentioned above, the effect consists of two animations which are applied to a block that contains the appearing text. This block is added by pseudo-element before in CSS and takes its text from the title attribute of the current link.

By default the block with the appearing text is collapsed vertically in order to be hidden. This condition of the block is achieved by using scaleY transformation function in transform CSS property which value is set to zero. At the same time the block is stretched horizontally by scaleX transformation function in transform CSS property which value is set to 4. The text in the block is transparent by using RGBA color where alpha channel is set to zero.

When the user hovers the cursor over the image, the first animation expands the block vertically thus making it visible. This animation changes the value of scaleY transformation function to 1. After the first animation is finished the second one starts performing: it collapses the block horizontally to normal scale, by setting the value of scaleX transformation function to 1, and simultaneously changes transparency of the text from transparent to non-transparent by changing the value of the alpha channel of RGBA color to 1.

When the user takes the cursor away from the image, all animations are performed in the reversed order.

Besides the block with the appearing text, there is one more block that is added by pseudo-element after in CSS. This block is always transparent and has nothing to do with the animations, it's only intended to solve the hovering bug in IE10.

Here are the CSS styles:

@-webkit-keyframes appearing {
  0%{
    -webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
  }
  50%{
    -webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
}

@keyframes appearing {
  0%{
    transform: scaleX(4) scaleY(0) translateY(-50%);
  }
  50%{
    transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
}

@-webkit-keyframes disappearing {
  0%{
    -webkit-transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
  50%{
    -webkit-transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    -webkit-transform: scaleX(4) scaleY(0) translateY(-50%);
  }
}

@keyframes disappearing {
  0%{
    transform: scaleX(1) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 1);
  }
  50%{
    transform: scaleX(4) scaleY(1) translateY(-50%);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    transform: scaleX(4) scaleY(0) translateY(-50%);
  }
}

@-webkit-keyframes positioning {
  0%{ z-index: 10; }
  99%{ z-index: 10; }
  100% { z-index: 1; }
}

@keyframes positioning {
  0%{ z-index: 10; }
  99%{ z-index: 10; }
  100% { z-index: 1; }
}

a {
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-decoration: none;
}

a:before {
  -webkit-animation: disappearing 500ms ease-in-out forwards;
  animation: disappearing 500ms ease-in-out forwards;
  background-color: rgba(0, 0, 0, 0.6);
  color: rgba(255, 255, 255, 0);
  content: attr(title);
  display: block;
  font-family: Tahoma;
  font-size: 24px;
  font-weight: bold;
  padding: 5% 2%;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  width: 96%;
  z-index: 5;
}

a img {
  -webkit-animation: positioning 510ms ease-in-out forwards;
  animation: positioning 510ms ease-in-out forwards;
  border: none;
  display: block;
  position: relative;
  z-index: 10;
}

a:after {
  opacity: 0;
  background-color: white;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 15;
}

a:hover:before {
  -webkit-animation: appearing 500ms ease-in-out forwards;
  animation: appearing 500ms ease-in-out forwards;
}

These CSS styles work perfectly well with the latest versions of modern browsers, such as Firefox, Chrome, Opera, Safari and Internet Explorer of version 10 and higher.

Live demo

Here is a live preview of the example above, shown in animated GIF:

Live preview of example for appearing text placed over an image using keyframe animation in CSS3

The following archive contains the example above:

Example

appearing_text_using_keyframe_animation.zip 565.48 kB

Continue reading here: How to display inline elements as block elements and visa-versa

Was this article helpful?

0 0