Menu
» » » NEW CSS3 THUMBNAIL IMAGE HOVER EFFECTS FOR YOUR BLOG


thumbnail Image hover effects
Hello how are you everybody.I hope you all have enjoyed your holidays and Christmas and a very happy new year.Thanks to all of you to keep engaged  with this blog in 2012 cuz this is you who make this blog able to stand upon feets.The article i wrote today is prity interesting to me cuz i have seen many other image hover effects but they failed to impress me.So the hover effects i want to share with you today are prity unique ,amazing and more important then anything light weight no compromise on your site speed.And they are also very easy to install on your site no techy work to do.You can use it as linking to another post or a small description for any upcoming post whatever you want.





How To Add Thumbnail Image Hover Effects 


1: Transparent Blue Hover Effect With slide

(i) Add the following HTML in the widget where you want to add the hover       effect. 

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
     
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Original Hover Effects with CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Tayyab Nasir (Blogging-Heaven.com)" />
     
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style2.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container">
            <div class="header">
                                <div class="clr"></div>
            </div>
         
            <div class="more">
                <ul>
                                <div class="main">
                <!-- SECOND EXAMPLE -->
                <div class="view view-second">
                    <img src="Your Image Url Here" />
                    <div class="mask"></div>
                    <div class="content">
                        <h2>Your Heading</h2>
                        <p>Your Description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>

  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.
Css

  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css both together



2: Transparent Mini zoom Hover Effect

(i) Add the following HTML in the widget where you want to add the hover       effect.

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Mini Zoom Transparent Hover Effect CSS3 </title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Mini Zoom Transparent Hover Effect  CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Alessio Atzeni for Codrops" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style1.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
                       <div class="clr"></div>
            </div>
                        <div class="main">
                <div class="view view-first">
                    <img src="Your Image Url Here" />
                    <div class="mask">
                        <h2>Your Heading</h2>
                        <p>Your Description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>  
                
  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.
Css

  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css both together

3: Image Spin Over Hover Effect

(i) Add the following HTML in the widget where you want to add the hover       effect.

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Spin Over Image Hover Effect </title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Spin Over Image Hover Effect CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Tayyab Nasir(Blogging-Heaven.com)" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style4.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
                   <div class="main">
             
                <div class="view view-fourth">
                    <img src="Your Image URL Here" />
                    <div class="mask">
                        <h2>Your Heading</h2>
                        <p>Your Description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               
  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.

Css

  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css both together

                                                                   
                                                               

4: Hover Effect Zoom In And Zoom Out

(i) Add the following HTML in the widget where you want to add the hover       effect.

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Hover Effect ZOOM IN AND ZOOM OUT CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Hove Effect Like Movie Credits CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Tayyab Nasir (Blogging-Heaven.com)" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style6.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
                   <div class="main">
             
                <div class="view view-sixth">
                    <img src="Your Image Url Here" />
                    <div class="mask">
                        <h2>Your Heading  </h2>
                        <p>Your Description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
                
  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.
Css

  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css both together




5: Image Roll Over Disapear Hover Effect



(i) Add the following HTML in the widget where you want to add the hover       effect.

HTML:



 <!DOCTYPE html>
<html lang="en">
    <head>
        <title>Image Rool Over Disapear Hover Effect CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Image Rool Over Disapear Hover Effect " />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Tayyab Nasir (Blogging-Heaven)" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style7.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
            <div class="main">
             
                <div class="view view-seventh">
                    <img src="Your Image Url Here" />
                    <div class="mask">
                        <h2>Your Heading</h2>
                        <p>Your  Description</p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.
Css

  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css both together





6:Full Zoom Hover Effect


(i) Add the following HTML in the widget where you want to add the hover       effect.
HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Full Zoom hover effect CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Full Zoom hover effect CSS3" />
        <meta name="keywords" content="css3, transitions, thumbnail, animation, hover, effect, description, caption" />
        <meta name="author" content="Tayyab Nasir (Blogging-Heaven.com)" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style_common.css" />
        <link rel="stylesheet" type="text/css" href="css/style10.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
                    <div class="main">
                <div class="view view-tenth">
                    <img src="Your image URL" />
                    <div class="mask">
                        <h2>Your Heading</h2> <p>Your Description </p>
                        <a href="#" class="info">Read More</a>
                    </div>
                </div>
               
  • Remove the red line if you want to add the widget on any non-english blog/website.
  • Change the blue colour with the url of your direct image "300x200" best fits in it.
  • Change the orange line with your heading.
  • Change the  Purple line with your description.
  • Change the pink coloured # sign with url where you wana send the visitor when clicked on read more button.
Css
  • Go to Templates >> Customize >> advanced >> Add css and paste the following css there with the common css 


IMPORTANT NOTE: 

When you paste the css that is provided under all the html codes then also paste below css cuz this is common with all and you have to paste it also under the other one.But If you wana add more then one widgets on a same blog then paste this css just once and other as regular they will work fine.




From The Author`s Desk > > > 

I hope you will like such a brilliant widget which will enhance your blog beauty as well.Plz tell me if there is any problem in the coding.And i am always ready to reply your comments cuz comments are more then welcome on this blog and appreciated then anything else so don`t forget to Subcribe by email to stay updated till then stay blessed and happy blogging


              


Posted by
Labels: ,
at Tuesday, January 01, 2013

2 comments:

Subscribe to: Post Comments (Atom)
 
Top