Animated image with spreading curtain effect and appearing title using only CSS3
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:
HTML is a language for web page markup.
Animation of the image consists of three parts:
- 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.
- 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.
- 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; }
Continue reading here: How to create from scratch Aero Glass Vista button in Photoshop
Was this article helpful?