Circle Hover Effects with CSS3 Transitions

Simply add the below where you want ...(Copy & Paste):

View Demo: Click Here
 
<!DOCYPE 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">
<title>Circle Hover Effects with CSS Transitions</title>
<link rel="stylesheet" type="text/css" href="http://demo.fit.com.np/css3/Circle%20Hover%20Effects%20with%20CSS%20Transitions%201/css/common.css" />
<link rel="stylesheet" type="text/css" href="http://demo.fit.com.np/css3/Circle%20Hover%20Effects%20with%20CSS%20Transitions%201/css/style5.css" />
<script type="text/javascript" src="http://demo.fit.com.np/css3/Circle%20Hover%20Effects%20with%20CSS%20Transitions%201/js/modernizr.custom.79639.js"></script>
<!--[if lte IE 8]><style>.main{display:none;} .support-note .note-ie{display:block;}</style><![endif]-->
</head>
<body>
<ul class="ch-grid">
  <li>
    <div class="ch-item ch-img-1">
      <div class="ch-info-wrap">
        <div class="ch-info">
          <div class="ch-info-front ch-img-1"></div>
          <div class="ch-info-back">
            <h3>taxi</h3>
            <p>by Ana Villa-Zamora <a href="http://drbl.in/ewng">View on Dribbble</a></p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="ch-item ch-img-2">
      <div class="ch-info-wrap">
        <div class="ch-info">
          <div class="ch-info-front ch-img-2"></div>
          <div class="ch-info-back">
            <h3>Stay Foxy</h3>
            <p>by Arnel Baluyot <a href="http://drbl.in/eQDg">View on Dribbble</a></p>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li>
    <div class="ch-item ch-img-3">
      <div class="ch-info-wrap">
        <div class="ch-info">
          <div class="ch-info-front ch-img-3"></div>
          <div class="ch-info-back">
            <h3>Klava Jinx</h3>
            <p>by Jamal Charanek <a href="http://drbl.in/ejLW">View on Dribbble</a></p>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
<div align="center">
<br />
<strong>POWERED BY</strong>
<br />
<a href="http://www.fit.com.np/">
<IMG src="http://jumboeducation.com/images/BRO2.jpg" />
</a>
</div>
</body>
</html>

Others

Radial Blur
Create attractive effect from photoshop of your photo.
Draw a Mobile ΓΆ€“ Photoshop Tutorial
Draw a Realistic Samsung Galaxy S2. To follow this tutorial, you will need the following resources...
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.
Landscape photo manipulation
In this tutorial,I`ll show you how to create your unique wallpapers using photo manipulation.

SIGN UP FOR NEWSLETTER

Sign up to received our free newsletter!
Name:
E-mail ID:

MOST READ

Views: 5033 Times
Create a realistic folded paper text in Photoshop READ MORE
Views: 2633 Times
Campaign aims to speed up 4G mobile roll-out in UK READ MORE
Views: 2635 Times
Facebook to file motion, discuss Nasdaq role in IPO: report READ MORE
Views: 5676 Times
Any Folder as Photo Folder READ MORE
Views: 7061 Times
PHP: Create Your Own MVC (Part 5) READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2018. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe