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

Animated image with spreading curtain effect and appearing title using only CSS3

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


Animation used in the following article can be applied to images in blocks where blocks are presented as a list of articles/posts/news on websites with this specific design.

HTML structure: every image is a element with span element and img element inside. The span element is used for appearing title.

HTML code of the image with the structure mentioned above:

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

Animation of the image consists of three parts:

  1. Half of dark cover on the left. This is a layer on the left side of the image which occupies half of the image space with semi-transparency and goes over the image. This layer is added by pseudo-element before in CSS.
  2. Half of dark cover on the right. This is a layer on the right side of the image which occupies half of the image space with semi-transparency and goes over the image. This layer is added by pseudo-element after in CSS.
  3. Appearing title. It's span element which is positioned over the image, but beneath "Dark cover" layers.

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

Special attention must be paid to the first two parts - "Dark cover" layers. They are positioned out of a element by using CSS properties left and right with negative values. Also a value of position CSS property for these layers is set to absolute. And final thing is that the value for overflow CSS property must be set to hidden for a element, it hides "Dark cover" layers when they are positioned out of the a element.

This animation works perfectly fine in latest browsers Chrome and Mozilla . But, animation works only partially in Opera, Safari and IE9, therefore it looks simpler and less attractive.

CSS styles:

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

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

a:before {
  left: 0;
}

a:after {
  right: 0;
}

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

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

a span {
  color: black;
  background-color: rgba(255, 255, 255, 0.8);
  bottom: 5%;
  display: block;
  opacity: 0;
  padding: 2% 3%;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  width: 94%;
  z-index: 2;
}

a:hover:before {
  left: -50%;
}

a:hover:after {
  right: -50%;
}

a:hover span {
  opacity: 1;
}

Live demo


 

Read also

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation