Home / Articles / Programming languages / Markup languages / HTML & CSS / Zoom and rotate effects for appearing text placed over an image using only CSS3

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

Zoom and rotate effects for appearing text placed over an image using only CSS3
 
Zoom and rotate effects for appearing text placed over an image using only 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.


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:

<a href="#" title="HTML is a language for web page markup"><img src="nature.jpg" alt=""></a>

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. 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%);
}

Live demo


 

Read also

Discussion (total 1 comments)

vikash kumar
vikash kumar
February 27, 2015 at 10:42 am
Awesome page ....

salute to the developer!!!!1

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation