Image Shine & Glow Effect with Pure CSS

One of the latest trends in web design is to use some cool hover effects on images to make them look special. It also prevents your visitors to get bored seeing the same static image. And since you are accomplishing your task with just a few lines of CSS codes, it hardly affects the page loading time.

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.

image-shine

 

Before we start our tutorial, I am sure you would like to have a glance at it.

Image Shine & Glow Effect Preview

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.

        <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’.

.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 is overflow 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.

.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).

.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.

.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.

Download Shine & Glow Effect Files

Go, grab it and let your images shine and glow with Pure CSS.

Tagged on: ,

13 thoughts on “Image Shine & Glow Effect with Pure CSS

  1. Anonymous

    Very nice effect but what happens when that image must be clicked? I am trying to use this effect in my project but the hoover box blocks the click.

    1. Lev

      You guys will be pleased to know there is actually a way you can click through an element using straight up CSS.

      Try this on the overlay you want to “click through”:

      pointer-events:none;

  2. Pedro Fernández

    Hello there, Gunjesh!

    This effect is SO cool! Just what I was looking form y site! ^_^

    Just one question: is there a way to avoid the effect taking place “backwards” when you stop hovering the image? I would like it to take effect only once, not twice.

    Thank you very much in advance!

    Pedro

    1. Prti

      I was having the same problem..

      you just have to move “transition: 1s;” from “.show-off” into “.demo:hover .show-off”

Leave a Reply