Simple image hover effect using CSS

Today we learn some simple CSS Image Hover Effects. we created some simple examples that will work in all browsers. Its very short and sweet tutorial so you can understand it even if you never touched CSS before.

For Image hover effect we use CSS :hover Selector. The :hover selector is used to select elements when you mouse over them. we learn below four Image Hover Effects in this tutorial :

Enlarge Image on hover

Shrink Image on hover

Rotate Image on hover

Tilt Image on hover

In this example we have :hover using height and width to change the size of the image, by adding transition: all 1s ease; to img we make that change from bigger- to smaller look smooth, changing the 1s to 1,1s will make the transition last longer and setting it to 0,9s will make it last shorter.

Enlarge Image on hover : In this example we change the size of image to bigger from smaller. To achieved this we add transform:scale(1.1); on img:hover, we can make it smooth by adding transition: all 1s ease; to img

 

HTML
in this we created two classes enlarge & normal now we write css for each class. normal class is for normal sate of image & when you keep mouse over image the code inside enlarge class will run.

CSS

Note : webkit & moz are CSS browser prefixes we need to add the prefix below for each browser
 Android: -webkit-
 Chrome: -webkit-
 Firefox: -moz-
 Internet Explorer: -ms-
 iOS: -webkit-
 Opera: -o-
 Safari: -webkit-

function scale() change image size. in this we increase size by 0.1 ( actual size is 1.0)

Shrink Image on hover : In this example we just Shrink image on hover by adding transform:scale(0.8); it reduce image size by 0.2

 

HTML :
we are using same HTML code just add new class shrink

CSS :

Rotate Image on hover : in this example we use transition again on hover but instead of scale we use rotate(360deg); which rotate image by 360 degree

 

HTML :
CSS :

Tilt Image on hover : In this example instead rotate image by 360 degree we changed it to 15 degrees so it just tilts a little bit.

 

HTML :
CSS :

Read More

Rich Snippets Tutorial for beginners

Good content is good for great SEO but content need to be understand by search engine, not just by people.search engines can't  understand Text based content , they just match it with search queries. But here is solution which make your content more readable not only for humans but also for search engines. The solution is 'Rich snippets' and here's we understand how to use it.

There are a few formats you can use for your rich snippets :

Microformats : the oldest and the simplest of the three.

RDFa : This one is based on W3C's RDF data model

Microdata : This is Ian Hickson's counter-proposal to RDFa. In spirit, it is an extensible version of microformats.

My recommendation would be to go with microdata and forget that the other two exist.all search engines prefer 'microdata'.

How to mark up your content using microdata

1 . itemscope and itemtype

Imagine you have a page about the movie Avatar, Your HTML code might look something like this:

code :
By adding itemscope, you are specifying that the HTML contained in the <div>...</div> block is about a particular item.

code :

You can specify the type of item using the itemtype attribute immediately after the itemscope.

code :

This specifies that the item contained in the div is in fact a Movie, as defined in the schema.org type hierarchy. Item types are provided as URLs, in this case http://schema.org/Movie.

2. itemprop

To provaide additional information such as actors, director, ratings we use the itemprop attribute

code :

Note : additional <span>...</span> tags added

3. Embedded items

In Some cases the value of an item property can itself be another item with its own set of properties. In our example director of the movie is an item of type Person and the Person has the properties name and birthDate. To specify that the value of a property is another item, we begin a new itemscope immediately after the corresponding itemprop.

code :

Read More