Submit your widget

awesome CSS3 hover effect

Created 4 years ago   Views 22687   downloads 5330    Author freshdesignweb
awesome CSS3 hover effect
View DemoDownload 157.4 KB
57
Share |

we'll show you new CSS hover effects using CSS transition properties with websymbols. It looks so much more interesting with creative design using circles transition style. We like CSS3 hover effects, so we would like to share  some new creating special hover effects for you!

Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties.

 The Markup

The CSS3 hover effects with Web-symbols HTML will have the following structure:

<ul class="ca-menu">
                    <li>
                        <a href="#">
                            <span class="ca-icon">A</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Exceptional Service</h2>
                                <h3 class="ca-sub">Personalized to your needs</h3>
                            </div>
                        </a>                   
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">I</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Creative Storytelling</h2>
                                <h3 class="ca-sub">Advanced use of technology</h3>
                            </div>
                        </a>                   
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">C</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Infographical Education</h2>
                                <h3 class="ca-sub">Understanding visually</h3>
                            </div>
                        </a>                    
                    </li>
                    <li>
                        <a href="#">
                            <span class="ca-icon">S</span>
                            <div class="ca-content">
                                <h2 class="ca-main">Sophisticated Team</h2>
                                <h3 class="ca-sub">Professionals in action</h3>
                            </div>
                        </a>  
                    </li>
    </ul>

Read more:http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html