Hover Effects

by Susan Delgado

HTML

<div class="wrap">
     <h2>On Clicks:</h2>

    <div class="btn-wrap  icon-effect-1">	    <a href="#set-1" id="target" class="icon">1clk</a>

    </div>  
   
     <h2>On hovers:</h2>

    <ul id="list">
        <li class="icon-wrap icon-effect-1 icon-effect-1a"> <a href="#set-1" class="icon">1a</a>

        </li>
        <li class="icon-wrap icon-effect-1 icon-effect-1b"> <a href="#set-1" class="icon">1b</a>

        </li>
        <li class="icon-wrap icon-effect-2 icon-effect-2a"> <a href="#set-1" class="icon">2a</a>

        </li>
        <li class="icon-wrap icon-effect-2 icon-effect-2b"> <a href="#set-1" class="icon">2b</a>

        </li>
        <li class="icon-wrap icon-effect-3 icon-effect-3a"> <a href="#set-1" class="icon">3a</a>

        </li>
        <li class="icon-wrap icon-effect-3 icon-effect-3b"> <a href="#set-1" class="icon">3b</a>

        </li>
    </ul>
    <ul id="list">
        <p>Note that the dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0</p>
        <li class="icon-wrap icon-effect-4 icon-effect-4a"> <a href="#set-1" class="icon">4a</a>

        </li>
        <li class="icon-wrap icon-effect-4 icon-effect-4b"> <a href="#set-1" class="icon">4b</a>

        </li>
    </ul>
    <p>&nbsp;</p>
    <ul id="list">
        <li class="icon-wrap icon-effect-5 icon-effect-5a"> <a href="#set-1" class="icon">5a</a>

        </li>
        <li class="icon-wrap icon-effect-5 icon-effect-5b"> <a href="#set-1" class="icon">5b</a>

        </li>
        <li class="icon-wrap icon-effect-5 icon-effect-5c"> <a href="#set-1" class="icon">5c</a>

        </li>
        <li class="icon-wrap icon-effect-5 icon-effect-5d"> <a href="#set-1" class="icon">5d</a>

        </li>
    </ul>
    <p>&nbsp;</p>
    <ul id="list">
        <li class="icon-wrap icon-effect-6"> <a href="#set-1" class="icon">6</a>

        </li>
        <li class="icon-wrap icon-effect-7 icon-effect-7a"> <a href="#set-1" class="icon">7a</a>

        </li>
  ...

CSS

body{
    color:#fff;
    background:#8B7E66;
    padding:10px 20px;
}
.btn-wrap{
    padding:5px 5px 0 5px;;
    width:120px;
    height:120px;
    
    background:#4679BD;
    text-align: center;
}
ul#list {
    list-style:none;
    margin: 0 auto;
}
ul#list li {
    display:inline-block;
    margin:8px;
    width:120px;
    height:120px;
    line-height:45px;
}
.wrap {
    padding: 2em 0 3em;
}
.icon-wrap {
    background:#FFB90F;
    text-align: center;
}
.icon {
    display: block;
    font-size: 21px;
    cursor: pointer;
    margin: 15px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    text-align: center;
    position: relative;
    z-index: 1;
    color: #fff;
}
.icon:after {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content:'';
}
.icon:before {
    /* speak: none; */
    font-size: 45px;
    display: block;
    -webkit-font-smoothing: antialiased;
}
.icon:before {
    content:"+";
}
/*  ============================= START 1 ============================= */
 .icon-effect-1 .icon {
    background: rgba(255, 255, 255, 0.1);
    -webkit-transition: background 0.2s, color 0.2s;
    -moz-transition: background 0.2s, color 0.2s;
    transition: background 0.2s, color 0.2s;
}
.icon-effect-1 .icon:after {
    top: -7px;
    left: -7px;
    padding: 7px;
    box-shadow: 0 0 0 4px #fff;
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
    -webkit-transform: scale(.8);
    -moz-transition: -moz-transform 0.2s, opacity 0.2s;
    -moz-transform: scale(.8);
    -ms-transform: scale(.8);
    transition: transform 0.2s, opacity 0.2s;
    transform: scale(.8);
    opacity: 0;
}
/*  ============================= Effect 1a  ============================= */
.icon-effect-1a .icon:hover, .icon.clicked{
    background: rgba(255, 255, 255, 1);
    color: #8B7E66;
}
.icon-effect-1a .icon:hover:after,.icon.clicked:after  {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform:...

JavaScript

// JS is only for on click version
$(function() {
   $( "#target" ).click(function() {
      //alert( '' + this + '');
       $(this).addClass('clicked');
     
    });
   $( "#target" ).mouseout(function() {
      //alert( '' + this + '');
       $(this).removeClass('clicked');
     
    });
});