CSS3-based mouse animated display details effects

Before you share a jquery-based accordion display details, today to share the CSS3-based mouse animated display of the details of the effect. This example mouse through the time based on the middle animation amplification, the effect is very good, as follows:

Online preview Source Download

The implemented code.

HTML code:

 <ulclass= "Blocks">        <Li>Vakmanschap en Ambacht<Divclass= "Popup">            <span>                <H3>vakmanschap en ambacht</H3>ervaring is niet te koop, Het is een kwestie van veel doen.                Met Aandacht en passie. Dat staat bij ons centraal.</span></Div>        </Li>        <Li>Begeleiding op het Werk<Divclass= "Popup">            <span>                <H3>begeleiding op het werk</H3>scholing of diploma ' s vormen de basis voor onze Collega ' s. Het Bewijs wordt echter geleverd in de Praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hun Werkzaamheden. Zo Houden we elkaar scherp en maken we optimaal gebruik van onze kennis, ervaring en talenten.</span></Div>        </Li>        <Li>Leren van Elkaar<Divclass= "Popup">            <span>                <H3>Leren van Elkaar</H3>kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim.                Mensen vinden het leuk om ' weetjes ' te delen, wij stimuleren onze mensen dit te doen, je Bent Immers nooit te ervaren om te leren.</span></Div>        </Li>        <Li>Vaste ploeg<Divclass= "Popup">            <span>                <H3>vaste ploeg</H3>Op Elk Object Werken We met Vaste collega s en ploegen. Ze kennen het pand, de omgeving en de mensen, en kunnen daardoor ' onzichtbaar ' Hun werk doen.                Bovendien geeft het uw mensen een vertrouwd gevoel dat er een bekende aan het werk are, die ze ook met Een incidenteel verzoek kunnen benaderen.</span></Div>        </Li>        <Li>RI&e<Divclass= "Popup">            <span>                <H3>RI&e</H3>Welzijn, Vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij Aanvang van Ieder Nieuw Project Voeren We samen met onze opdrachtgever een RI&euit.                Daarmee Brengen We alle Risico ' s in kaart, opdat we ons werk veilig en goed kunnen doen. Desgewenst Brengen wij advies uit over Verbeterpunten, zodat er volgens de regels gewerkt kan worden.</span></Div>        </Li>        <Li>Direct Contact<Divclass= "Popup">            <span>                <H3>Direct Contact</H3>Glas&reinis een Platte organisatie met Korte Lijnen. Zowel met Onze Opdrachtgevers als met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelen op wijzigende omstandigheden en aanvragen. Ons Belang is en blijft iedereen tevreden en actief te houden.</span></Div>        </Li>    </ul>

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: the; }. 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

CSS3-based mouse animated display details effects