Sometimes back, I have shown how to create some simple and neat image hover effects with CSS. Recently I was going through CSS3 Animated Hover effect at webdesignshock.com where a shine effect is applied on an image with the help of an additional background image. Enhancing this original work, today I am going to show you how to create Image Shine and Glow Effect with Pure CSS by providing an additional glow effect after shine, without using any image. This will provide the special look to your images and grab your visitor’s attention.
For achieving this, I have used CSS3 properties like CSS gradient, box-shadow and transition which will work absolutely fine with all browsers except a few old ones like IE8, which do not support CSS3. But nothing to worry, the image will still be visible and it will degrade nicely.
Before we start our tutorial, I am sure you would like to have a glance at it.
Liked it? With just CSS3, we are creating a shiny wave glass effect and after this an additional image glow effect appears. I have kept all the files to download at the end of this tutorial which you can grab and use whatever way you like (except providing the direct download link to the files from your blog or website).
HTML Markup
As with most of my tutorial, html code here is simple and straight forward. We have a parent div inside which we are keeping one image and one additional div.
1
2
3
4
| <div> <img src="flower.jpg" alt="" /> <div /> </div> |
The parent div with ‘demo’ class acts a container for image. The child div with ‘show-off’ class uses a gradient to produce a wavy shine effect.
CSS Codes
Let’s move on to the CSS codes. We will start with the parent div class, i.e. ‘demo’.
1
2
3
4
5
6
7
8
9
10
11
12
13
| .demo{ width: 350px; height: 400px; margin: 30px auto; padding: 5px; background-color: #FFFFFF; position: relative; overflow: hidden; border-radius: 5px; transition: all 1000ms cubic-bezier(0.005, 1.650, 1.000, -0.600); transition-timing-function: cubic-bezier(0.005, 1.650, 1.000, -0.600);} |
As you can see, we are defining the width and height properties here which are equal to the height and width of the image. The padding of 5px works as the white border as we are defining background color as white. A border radius of 5px makes it look smoother.
For shine effect to work properly, the position of child div with ‘show-off’ class must be absolute to the parent div. Thus, we have to define the position of parent div (demo class) as relative and child div (show-off class) as absolute. One more important CSS property isoverflow which we are defining as hidden. This is required to hide the part of child object which is outside the border of parent div.
For providing the glow effect after shine, we need to define the CSS3 transition property here. With transition, we are introducing a delay which lets the glow effect appear only after the shine effect. If you look at the CSS transition and transition-timing-function codes, these will look a little complex. In fact, I have used a wonderful tool for generating CSS transition –Ceaser. It alloys you to create CSS easing animation with a simple UI.
On mouse roll over on demo, we are just introducing a box-shadow for glow effect.
1
2
3
4
| .demo:hover{ box-shadow: 0px 0px 20px 5px #FFFFFF;} |
The shine effect is created by the div with ‘show-off’ class. First of all, we are creating a gradient starting from fully transparent to 70% opaque in white color which acts as the shining cover. The transparency is achieved by defining the color in rgba, (a for alpha).
1
2
3
4
5
6
7
8
9
10
11
| .show-off{ width: 500px; height: 500px; position: absolute; top: -180px; left: -600px; transition: 1s; transform: rotate(30deg); background: linear-gradient(0deg, rgba(255, 255, 255, 0)50%, rgba(255, 255, 255, 0.7)100%);} |
You can see that we have defined the width and height equal to 500px which is more than the width and height of the image. This is to make sure that it covers the image fully at the time of image shining. Normally, you should keep the height and width more than the diagonal length of image.
Initially, we want this div which acts as the shining cover out from the image. This is done by defining negative values for top and left. This takes the cover out from visible area. Finally, we are tilting the cover initially by 30 degrees with CSS transform property. And for smooth animation in shine, we are defining CSS transition of 1 second.
1
2
3
4
5
6
| .demo:hover .show-off{ top: 0px; left: 0px; transform: rotate(0deg);} |
Once you roll over your mouse to the picture (demo class); the top and left position of cover (show-off class) gets fixed at the top left corner. For doing this; we are defining the top and left properties to zero. At the same time, we are making this cover straight by defining the rotate angle to zero in CSS transform.
It is recommended that you set the overflow property of demo class to hidden only after you get your shine effect working correctly. This way you will see the initial and final position of the cover and make adjustments in height, width, left and right properties.
Conclusion and Download
With just a few lines of codes; we can easily achieve cool hover effects on image. Though it is not supported by a few older browsers like IE8, you can implement it without any worry because your image is still visible. Just make sure that you are using the vendor prefixes for better compatibility with all browsers (I have not included here for simplicity).
I have kept all the files in a zip folder for download.
Go, grab it and let your images shine and glow with Pure CSS
No comments:
Post a Comment