Horizontal and vertical animated stretching effect for appearing text placed over an image using only CSS3

CSS styles shown in this article can be used to animate text in thumbnails for galleries or articles on a website.

The structure of HTML is very simple: every link is a element that contains img element (simple image in HTML) inside and has title attribute whose value is used for appearing text with the animation.

The following HTML code is an example of one such simple link with an image inside:

Animation for the image and its appearing text consists of two parts:

  1. Dark cover. This is a layer which is placed over the image and captures all the space taken up by the image. It means that this layer has the same width and height as the image, no matter what the image size is. This layer is added by pseudo-element before in CSS, it is semi-transparent (opacity CSS property) with black as the background color. It appears when the user hovers the cursor over the image.
  2. Appearing text. This is a layer which is placed over the "Dark cover" layer. This layer is added by pseudo-element after in CSS and has a transparent background. It contains only text that is taken as the value from the attribute title in a element. This layer is positioned in the middle of the image vertically and horizontally; it has animation that consists of one stretching effect which can be either horizontal or vertical. This animation is achieved by combining two CSS properties: transform and transition. The transform CSS property uses scaleX or scaleY transformation functions in order to stretch this layer horizontally or vertically. This animation starts operating when the user hovers the cursor over the image.

Here are CSS styles that generate animation with horizontal stretching effect:

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

a:before {
  background-color: rgb(0, 0, 0);
  content: "";
  display: block;
  height: 100%;
  opacity: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

a:after {
  color: rgba(255, 255, 255, 0);
  content: attr(title);
  display: block;
  font-family: Tahoma;
  font-size: 30px;
  font-weight: bold;
  padding: 0 3%;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: scaleX(3) translateY(-50%);
  -ms-transform: scaleX(3) translateY(-50%);
  transform: scaleX(3) translateY(-50%);
  width: 94%;
  z-index: 3;
}

a img {
  border: none;
  display: block;
  z-index: 1;
}

a:after {
  -webkit-transition: all 350ms ease-in-out;
  -moz-transition: all 350ms ease-in-out;
  -o-transition: all 350ms ease-in-out;
  transition: all 350ms ease-in-out;
}

a:hover:before {
  opacity: 0.6;
}

a:hover:after {
  color: rgba(255, 255, 255, 1);
  -webkit-transform: scaleX(1) translateY(-50%);
  -ms-transform: scaleX(1) translateY(-50%);
  transform: scaleX(1) translateY(-50%);
}

Live demo

Here are some additional CSS styles that can be added to the styles above in order to replace the horizontal stretching effect with the vertical one:

a:after {
  -webkit-transform: scaleY(5) translateY(-50%);
  -ms-transform: scaleY(5) translateY(-50%);
  transform: scaleY(5) translateY(-50%);
}

a:hover:after {
  -webkit-transform: scaleY(1) translateY(-50%);
  -ms-transform: scaleY(1) translateY(-50%);
  transform: scaleY(1) translateY(-50%);
}

Continue reading here: Selecting the right Word Press theme - what to opt for and avoid

Was this article helpful?

0 -3