How To Stop Image Hotlinking through .htaccess

admin    Photos     htaccess, image, tool

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: read more

Going nuts with CSS transitions

admin    CSS, Photos     css3, howto, image, tutorial, webkit

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

3 Easy and Fast CSS Techniques for Faux Image Cropping

admin    CSS, Photos     CSS, howto, image

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.