Hover effects with CSS3 styling

In this chapter we will look into making very stylish hovering effects with the CSS3 techniques. The main properties used are background gradients, transitions, transforms and opacity.
Example

Cool hovering effects example with CSS3 styling:

<!DOCTYPE html>
<html>

<head>

<link href='http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather' rel='stylesheet' type='text/css'>

<style type="text/css">
html {
    min-height: 300px;
}
body { 
    background: radial-gradient(ellipse at bottom left, rgba(104,128,138,0.4) 10%, rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25), rgba(42,60,87,0.4)), linear-gradient(135deg, #670d10, #092756);
}
h1 {
    padding-left: 10px;
    color: white;
}
#hover {
    color: rgba(188, 175, 204, 0.9); 
}
div#all {
    width: 100%; height: 100%;
}
/* generic css */
.view {
    position: relative; float: left; overflow: hidden;
    margin: 10px;
    text-align: center;
    border: 10px solid #fff;
    box-shadow: 1px 1px 2px #e6e6e6;
    cursor: default;
    background: #fff no-repeat center center;   
}
.view .mask {
    position: absolute; overflow: hidden;
    width: 300px; height: 200px;
    top: 0px; left: 0px
}
.view img {
    position: relative; display: block;   
}
.view h2 {
    position: relative;
    padding: 10px; margin: 20px 0 0 0;
    font-family: Raleway, serif; color: #fff; font-size: 17px;
    text-transform: uppercase; text-align: center;
    background: rgba(0, 0, 0, 0.8);   
}
.view p {
    position: relative;
    padding: 0px 20px 0px;
    font-family: Merriweather, serif; font-style: italic; font-size: 14px;
    color: #fff; text-align: center;    
}
.view a.info {
    display: inline-block;
    padding: 7px 14px;
    font-family: Raleway, serif; color: #fff;
    text-decoration: none; text-transform: uppercase;  
    box-shadow: 0 0 1px #000  ;
    background: #000;    
}
.view a.info:hover {
    box-shadow: 0px 0px 5px #000;
}
.view-first img {     
    width: 300px; height: 200px;
    transition: all 0.2s linear;
    /* ADD proprietary selectors if needed */
}
.view-first .mask {
    background-color: rgba(155, 91, 52, 0.7);
    opacity: 0;
    transition: all 0.4s ease-in-out;
    /* ADD proprietary selectors if needed */    
}
.view-first h2 {
    font-family: Raleway, serif;
    opacity: 0;
    transform: translateY(-100px);   
    transition: all 0.2s ease-in-out;
    /* ADD proprietary selectors if needed */
}
.view-first p {     
    opacity: 0;
    transition: all 0.2s linear;
    transform: translateY(100px);
    /* ADD proprietary selectors if needed */
}
.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
    /* ADD proprietary selectors if needed */
}
.view-first:hover img { 
    transform: scale(1.1);
    /* ADD proprietary selectors if needed */
} 
.view-first:hover .mask { 
    opacity: 1;
}
.view-first:hover h2, .view-first:hover p, .view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
    /* ADD proprietary selectors if needed */
}
.view-first:hover p {
    transition-delay: 0.1s;
    /* ADD proprietary selectors if needed */
}
.view-first:hover a.info {
    transition-delay: 0.2s;
    /* ADD proprietary selectors if needed */
}
.view-title, .view-second, .view-third {
    border: 2px solid #fff;
}
.view-title {
    position: relative;
    border: 0px solid #fff;
}
.view-title h3 {
    position: relative;
    padding: 20px 0px; margin:0px 0px -10px 0px;
    font-family: Raleway, serif; color: #eee; 
    text-transform: uppercase; text-align: left;
    text-shadow:0px 2px 2px rgba(0,0,0,0.6);
    font-size:13px;
    border: 0px solid #fff; 
}
.view-second img, .view-third img {  
    opacity:0.9;
    transform: scale(0.9);
    transition: all .5s ease-in-out;
    /* ADD proprietary selectors if needed */
}
.view-second:hover img, .view-third:hover img { 
    opacity: 1;
    transform: scale(1.0); 
    /* ADD proprietary selectors if needed */     
}                           

</style>
</head>

<body>

<h1 style='font-family: Raleway'> CSS3 hover<span id="hover"> effects:</span></h1>

<div id="all">
    
    <div class="view view-first">  
        <img src="../../../img/tutorials/css3_advanced_example_he.jpg" width="100" height="200" alt="CSS3 hovers"/> 
        <div class="mask">  
            <h2>HTML5: Geo-location API</h2>  
            <p>Geo location is a HTML5 API which helps in identifying the geographical location of a Website/Application user.</p>  
            <a href="http://brenkoweb.com/articles/development/advanced-html/geo-location-api-for-html5" class="info">Read More</a>  
        </div>  
    </div>  
    
    <div class="view-title">
        <h3>Read more</h3>
    </div>

    <div class="view view-second">
        <a href="http://brenkoweb.com/articles/development/advanced-html/how-to-draw-polygons-with-html5" title="HTML5 Articles">
            <img src="../../../img/tutorials/polygons_in_html5.jpg" width="56" height="40" alt="HTML5 Articles"/></a>
    </div>

    <div class="view view-third">  
        <a href="http://brenkoweb.com/tutorials/html5/html5-basics" title="HTML5 Tutorials">
            <img src="../../../img/tutorials/html5_ex_1.jpg" width="56" height="40" alt="HTML5 Tutorials"/></a>
        
    </div>  
  
</div>

</body>

</html>
›› go to examples ››
Hover effects with CSS3 styling

Example

Cool hovering effects example with CSS3 styling:

Comments

About

Contact

Get Connected
