Animated image with zoom effect and appearing title using only CSS3

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:

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;
}

Continue reading here: Tables and borders in HTML

Was this article helpful?

0 0