Simply download and include the bonus stylesheet in the <HEAD> section of your web pages.


interimg.css - 19.7kb


interimg.min.css - 17.9kb


animate.css - 51.1kb

Bonus Stylesheet Examples

My free-to-download-and-use stylesheet helps take the pain out of styling images and other content on your site.

Setting up the style of image/content you want couldn't be easier — simply select from the effects shown below to generate the required stylesheet classes you should append to your image tags or any other HTML content, then scroll down to grab the code.

* Animation add-on effects courtesy of Dan Eden

NB Only one shadow/glow setting can be applied due to the way they are stacked in CSS3 - eg adding a shadow inset will override a previously selected glow.

This is a standard DIV containing HTML

Code

IMG Tag

<img src="image.jpg" alt="" class="" />

DIV Tag

<div class="">
     Your HTML
</div>

Advanced Usage

You can also use jQuery to add/remove classes on-the-fly, allowing you to make some wonderful transitions, for example, hover over the following image:

IMG Tag Setup

<img src="image.jpg" alt="" class="myEffect blur-5" />

jQuery Setup

$('.myEffect').mouseover(function(){
     $('.myEffect').removeClass('blur-5');
     $('.myEffect').addClass('animated shake');
}).mouseout(function(){
     $('.myEffect').removeClass('animated shake');
     $('.myEffect').addClass('blur-5');
});

By defining the above script to activate against any item with the class 'myEffect', it can be set-up once and used several times on a page, eg for each image, chosen DIVs etc. However, if you just want to target all images on a page, you could use $('img') instead of $('.myEffect').

Compatibility

Where possible, these styles have been made compatible with IE7+ and all other modern browsers. Where the styles are not supported, they will be ignored.