The CSS 3-based mouse displays Detail effects through animation, and the CSS 3 mouse details Effects

The CSS 3-based mouse displays Detail effects through animation, and the CSS 3 mouse details Effects

I have previously shared a jquery-based accordion display details for you. Today I want to share with you the CSS 3-based mouse-animated display details special effects. This instance is zoomed in based on the intermediate animation when the mouse passes through, and the effect is very good, as shown below:

Download Online Preview source code

Implementation code.

Html code:

 <ul class="blocks">        <li>Vakmanschap en ambacht<div class="popup">            <span>                
Css3 code:
html        {            font-family: 'Noto Sans' , serif;        }                .blocks        {            margin: auto;            max-width: 1070px;            padding: 0;        }                .blocks li        {            color: #fff;            background-color: #2196F3;            cursor: default;            float: left;            list-style: none;            margin: 1%;            padding: 60px 0;            position: relative;            text-align: center;            -webkit-transition: .3s cubic-bezier(.3,0,0,1.3);            transition: .3s cubic-bezier(.3,0,0,1.3);            width: 31%;            border-radius: 4px;            font-weight: bold;        }                .blocks li:hover        {            -webkit-transform: scale(.7);            -ms-transform: scale(.7);            transform: scale(.7);            z-index: 3000;        }                .popup        {            background-color: inherit;            color: #fff;            height: 100%;            width: 100%;            left: 0;            opacity: 0;            position: absolute;            top: 0;            padding: 15px;            border-radius: 4px;            -webkit-transition: .3s cubic-bezier(.3,0,0,1.37);            transition: .3s cubic-bezier(.3,0,0,1.37);        }                .popup span        {            font-size: 12px;            font-weight: normal;            left: 0;            padding: 15px 25px;            position: absolute;            top: 50%;            -webkit-transform: translateY(-50%);            -ms-transform: translateY(-50%);            transform: translateY(-50%);        }                .popup h3        {            font-size: 13px;            margin: 0 0 5px;            padding: 0;        }                .blocks li:hover .popup        {            opacity: 1;            -webkit-transform: scale(2);            -ms-transform: scale(2);            transform: scale(2);            box-shadow: 0 0 10px 2px rgba(0,0,0,.4);        }
Via: http://www.w2bc.com/Article/13665