Home / Articles / Programming languages / Markup languages / HTML & CSS / Expanding effect for appearing text placed over an image using keyframe animation in CSS3

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

Expanding effect for appearing text placed over an image using keyframe animation in CSS3
 
Expanding effect for appearing text placed over an image using keyframe animation in CSS3
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


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:

<a href="#" title="How to improve CSS code"><img src="nature.jpg" alt=""></a>

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:


 

Read also

Animation in CSS3

Animation in CSS3

Discussion (total 2 comments)

Beben Koben
April 08, 2015 at 09:02 am
I try remove the code, nothing happened!

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

for what it is?
Btw, nice hover :)
Administrator User
Administrator User
April 08, 2015 at 01:38 pm
Hello Beben Koben!
I am glad that you noticed it! But, please read the last two paragraphs that go before CSS code.

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation