You can stop others from hotlinking your site’s files by placing a file called .htaccess in your site root (main) directory. The period before the name means the file is hidden, so you may want to edit your file as htaccess.txt, upload it to your server, then rename the txt file to .htaccess in your directory. Contact your web host on how to access your directories and configure your .htaccess file.

Before writing code in your .htaccess file, there is a online site which provide you create your Hotlink protection of images file.

Htaccess Tools

Use this generator to create a .htaccess file for hotlink protection of your images and pictures. Hotlink protection can save you lots of bandwidth by preventing other sites from displaying your images.
Example: Your site url is www.wparena.com. To stop hotlinking of your images from other sites and display a replacement image called hotlink.gif from our server, place this code in your .htaccess file:

RewriteEngine On
RewriteCond %{HTTP_REFERER} !^http://(.+.)?wparena.com/ [NC]
RewriteCond %{HTTP_REFERER} !^$
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://altlab.com/hotlink.gif [L]

The first line of the above code begins the rewrite. The second line matches any requests from your own wparena.com url. The [NC] code means “No Case”, meaning match the url regardless of being in upper or lower case letters. The third line means allow empty referrals. The last line matches any files ending with the extension jpeg, jpg, gif, bmp, or png. This is then replaced by the hotlink.gif image from the altlab.com server. You could easily use your own hotlink image by placing an image file in your site’s directory and pointing to that file.

To stop hotlinking from specific outside domains only, such as myspace.com, blogspot.com and livejournal.com, but allow any other web site to hotlink images:

RewriteEngine On
RewriteCond %{HTTP_REFERER} ^http://(.+.)?myspace.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?blogspot.com/ [NC,OR]
RewriteCond %{HTTP_REFERER} ^http://(.+.)?livejournal.com/ [NC]
RewriteRule .*.(jpe?g|gif|bmp|png)$ http://altlab.com/hotlink.gif [L]

You can add as many different domains as needed. Each RewriteCond line should end with the [NC,OR] code. NC means to ignore upper and lower case. OR means “Or Next”, as in, match this domain or the next line that follows. The last domain listed omits the OR code since you want to stop matching domains after the last RewriteCond line.

You can display a 403 Forbidden error code instead of an image. Replace the last line of the previous examples with this line:

RewriteRule .*.(jpe?g|gif|bmp|png)$ – [F]

Warning: Do not use .htaccess to redirect image hotlinks to another HTML page or server that isn’t your own (such as this html page). Hotlinked images can only be replaced by other images, not with an HTML page.

As with any htaccess rewrites, you may block some legitimate traffic (such as users behind proxies or firewalls) using these techniques.

This article is going to show you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site. You’ll see it’s so easy to handle the image effects with only writing lines of CSS words, no javascripts, no coding. just it is!

Related properties include:

• -webkit-box-shadow
• -moz-box-shadow
• box-shadow

• -webkit-transform
• -moz-transform
• transform

• -webkit-transition

Read the original article here.

Note with the hovering examples that the animation will reverse itself when the mouse moves out of the div. Any time the property changes value, the animation will simply start again with the current position as the from value and the new value as the destination. The transition properties of the source state are used to figure out how to animate to the new target state.

The key points to understand about transitions are:
(1) They are implicit animations. Scripts and stylesheets can be written as normal, and the animations will simply happen implicitly as the properties change values.
(2) They degrade gracefully. Browsers that do not support transitions simply won’t animate, but otherwise all code and style rules can remain the same.

Here are more detailed descriptions of the properties. All of these properties can take multiple comma-separated values.

transition-property
Values: none | all |
Initial Value: all
Description: Specifies what property triggers an animation. A value of none means there is no transition. A value of all means that every animatable property triggers an animation. Otherwise an animation will only trigger when the exact specified property changes value.

transition-duration
Values:
Inital Value: 0
Description: Specifies how long the transition should take. The default is 0.

transition-timing-function
Values: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)
Initial Value: ease
Description: The transition-timing-function property describes how the animation will proceed over time. Keywords can be used for common functions or the control points for a cubic bezier function can be given for complete control of the transition function. To specify a cubic bezier function, you give an X and Y values for 2 of the control points of the curve. Point P0 is implicitly set to (0,0) and P3 is implicitly set to (1,1). These 4 points are used to compute a cubic bezier curve.

The timing function keywords have the following definitions:
linear – The linear function just returns as its output the input that it received.
defaultease – The default function, ease, is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).
ease-in – The ease-in function is equivalent to cubic-bezier(0.42, 0, 1.0, 1.0).
ease-out – The ease-out function is equivalent to cubic-bezier(0, 0, 0.58, 1.0).
ease-in-out – The ease-in-out function is equivalent to cubic-bezier(0.42, 0, 0.58, 1.0)
cubic-bezier – Specifies a cubic-bezier curve whose P0 and P3 points are (0,0) and (1,1) respectively. The four values specify points P1 and P2 of the curve as (x1, y1, x2, y2).

Here’s another demo created by myself after reading this article. really exciting exercise!!

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Click here to read the original article.