Home / Articles / Programming languages / Markup languages / HTML & CSS / Animated image with zoom effect and appearing title using only CSS3

Animated image with zoom effect and appearing title using only CSS3

Animated image with zoom effect and appearing title using only CSS3
 
Animated image with zoom effect and appearing title 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.


Nowadays, there are more and more websites which display articles/posts/news as square boxes in several columns where each square has a main image and the title of the article/post/news. The following article contains an example of a simple animation for the main image which can make such squares look more attractive.

Let's begin with HTML structure. Every image is a link with this image inside. The link has attribute title, its value is used for appearing title animation.

Here is HTML code of a link with an image:

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

Animation of the image consists of three parts:

  1. Zoom effect of the image. This effect is achieved by using transform CSS property along with scale method.
  2. Dark cover of the image. Actually it's a layer which goes over the image and has the same size as the image. This layer is added by pseudo-element before in CSS, it is semi-transparent (opacity CSS property) with black as the background color.
  3. Appearing title. It's also a layer which goes over the image and the "Dark cover" layer. This layer is added by pseudo-element after in CSS, it has semi-transparent background (RGBA) set to white color and a text which is taken from the attribute title of the link.

All three parts of this specially combined animation are performed when the user hovers the cursor over the image.

Here are the CSS styles:

a {
  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 {
  display: block;
  background-color: rgba(255, 255, 255, 0.8);
  color: black;
  content: attr(title);
  left: -100%;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 5%;
  width: 94%;
  z-index: 3;
}

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

a:before,
a:after,
a img {
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
}

a:hover img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

a:hover:before {
  opacity: 0.3;
}

a:hover:after {
  left: 0;
}

Live demo


 

Read also

Discussion (total 1 comments)

May 22, 2014 at 04:38 am
thank you for sharing :D

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation