Zoom and rotate effects for appearing text placed over an image using only CSS3

Animation demonstrated in this article uses only CSS3. It consists of one simple semi-transparent layer placed over the image and appearing text with zoom and rotate effects.

The current CSS styles can be used to improve some parts of website design such as thumbnails for galleries or articles.

The HTML structure has never been easier than the current one. Every image is img element that is located inside a element - simple HTML link which in turn has title attribute for appearing text with the animation.

Here is HTML as an example of one such simple image:

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 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. It is a transparent layer which 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 two effects: zoom and rotate. This animation is achieved by combining two CSS properties: transform and transition. The transform CSS property uses scale and rotate transformation functions in order to zoom and rotate this layer. All this animation starts operating when the user hovers the cursor over the image.

Here are CSS styles which generate animation with zoom effect:

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

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

a:after {
  font-family: Tahoma;
  color: white;
  content: attr(title);
  display: block;
  font-size: 30px;
  font-weight: bold;
  opacity: 0;
  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: scale(0) translateY(-50%);
  -ms-transform: scale(0) translateY(-50%);
  transform: scale(0) 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 {
  opacity: 1;
  -webkit-transform: scale(1) translateY(-50%);
  -ms-transform: scale(1) translateY(-50%);
  transform: scale(1) translateY(-50%);
}

Live demo

Here are some additional styles which can be added the ones above in order to add rotate effect to the animation:

a:after {
  -webkit-transform: scale(0) rotate(-360deg) translateY(-50%);
  -ms-transform: scale(0) rotate(-360deg) translateY(-50%);
  transform: scale(0) rotate(-360deg) translateY(-50%);
}

a:hover:after {
  -webkit-transform: scale(1) rotate(0deg) translateY(-50%);
  -ms-transform: scale(1) rotate(0deg) translateY(-50%);
  transform: scale(1) rotate(0deg) translateY(-50%);
}

Continue reading here: Configuring Bootstrap: which components to choose

Was this article helpful?

+1 0