Tired of flipping through a bundle of dull and flat images?… This might be happening to your site visitor also, haven’t you noticed that as time goes by users are more and more hard to impress … suddenly it seems like its not enough for certain viewers to have a great display of images if when they don’t have incorporated some transition or display effect, but shine can be a cool and pretty simple solution to boost image display and make a compelling end result.

DEMO (Rollover to see the effect)

[jsfiddle url=”http://jsfiddle.net/ShockFamily/Mdm9x/” height=”450px” include=”result,html,css”]

The utilities and advantages of incorporating CSS3 to your website design are not a secret to web developers, well in this occasion we’re bringing you from CSS3 a quick and easy way to incorporate a shine effect transition to your images, useful in making your user interface elements look like they’re a real polaroid photo with a shinny glass effect finish! in a very easy way to achieve.

First, we start by creating two divs, the main one will be one containing the image and the secondary one is the one that will be included within the first div, in this last one we will include the shine effect, as seen in the following example:

[html]
<div class="image_shine"><img src="http://www.wordpressthemeshock.com/banners/banner_10_themeshock.jpg" alt="" />

</div>
[/html]

Then, we’re going to prepare the CSS. The first div that includes the image is called image shine, we give it the attributes of with and height. Remember this must have a relative position to place the shine effect:

[css]
.image_shine{
width:  250px;
height: 250px;
margin: 50px;
position: relative;
border: 2px solid #73A8C1;
}

[/css]

Now, we are going to create the shine effect. The with and height must be placed at 100% within the main div and absolute composition, and it will start in the top left part of the div.

[css]width:100%; height: 100%;
position: absolute; left:0px; top:0px;

[/css]

Afterwards, we place the shine image, that must be larger than the container of the main div. Then we place the image 262px to the left (this corresponding to our given example), and we specify the no repeat term within the code so that the image isn’t shown when the page is loading.The code will be shown as seen in the following:

[css].hover_shine{
width:100%; height: 100%;
background-image: url(shine.png);
position: absolute;
/*Posicion inicial del shine*/
background-position: -262px 0;
left:0px; top:0px;
background-repeat:no-repeat;
}[/css]

Now we are going to create the Hoover effect for this div, which refers to moving the image position to the right, this is the final position of the image after the effect

[css].hover_shine:hover{
/*Posicion final del shine*/
background-position: 250px 0;
}[/css]

Usage of the transition for the effect

The transition effect is one of the freshest CSS3 features, which allows us to create movement effects without the use of JQuery. keep in mind that his effect does not work within internet explorer, but it does work for other browsers.

This transition effect works upon three values: the first is the element that the transition is applied to, that in our case will be background-position; the second parameter that receives the transition effect  is the time in seconds: and the third parameter is the transition type that can be: linear, ease, bounce, ease-in, ease-out, ease in-out.

Due to the fact, that the CSS3 specification isn’t normalized we must use the prefixes for mozilla, opera and webkit. The code for this transition will be show like this, and must be within of the CSS  of the shine container

[css]webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;[/css]

Final code

[css].hover_shine{
width:100%; height: 100%;
background-image: url(shine.png);
position: absolte;
background-position: -262px 0;
left:0px; top:0px;
background-repeat:no-repeat;
-webkit-transition: background-position .3s ease;
-moz-transition: background-position .3s ease;
-o-transition: background-position .3s ease;
transition: background-position .3s ease;
}[/css]

To view this demo in real life, please check our gallery demo in our wordpress themes at wordpressthemshock as seen in the image below, and if you have some time, take a look to our premium package:  The Shock Bundle