Today, we want to share an accordion image based on jquery. This image shows the effect of the mouse is gray before the mouse, when the picture becomes large and color. As follows:
Online preview Source Download
The implemented code.
HTML code:
<Divclass= "Page-container"> <Divclass= "Flex-container"> <Divclass= "Country Netherlands"> <Div>Netherlands</Div> </Div> <Divclass= "Country Belgium"> <Div>Belgium</Div> </Div> <Divclass= "Country France"> <Div>France</Div> </Div> <Divclass= "Country Germany"> <Div>Germany</Div> </Div> <Divclass= "Country England"> <Div>England</Div> </Div> </Div> </Div> <Scriptsrc= ' Jquery.js '></Script> <Script> $('. Country'). Click (function () { $( This). Toggleclass ('Active'); $('. Page-container'). Toggleclass ('opened'); }); //@ sourceurl=pen.js </Script>
CSS code:
Div{-moz-box-sizing:Border-box;box-sizing:Border-box; }html, body,. Page-container{Height:100%;Overflow:Hidden; }. Page-container{-webkit-transition:padding 0.2s ease-in;transition:padding 0.2s ease-in;padding:80px; }. page-container.opened{padding:0; }. page-container.opened. Flex-container. Country:not (. Active){Opacity:0;-webkit-flex:0;-ms-flex:0;Flex:0; }. page-container.opened. Flex-container. Country:not (. Active) Div{Opacity:0; }. page-container.opened. Flex-container. Active:after{-webkit-filter:grayscale (0%)! Important;Filter:grayscale (0%)! Important; }. Flex-container{Display:-webkit-flex;Display:-ms-flexbox;Display:Flex;Height:100%; }@media All and (max-width:900px){. Flex-container {-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column; }}. Country{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;Flex-grow:1;-webkit-flex:1;-ms-flex:1;Flex:1;-webkit-transition:0.5s ease-in-out;transition:0.5s ease-in-out;cursor:Pointer;font-family:"Bree Serif", Serif;text-align:Center;Color:#fff;font-size:22px;Text-shadow:0 0 3px #000; }. Country Div{position:Absolute;width:100%;Z-index:Ten;Top:50%;text-align:Center;-webkit-transition:0.1s;transition:0.1s;-webkit-transform:Translatey ( -50%);-ms-transform:Translatey ( -50%);Transform:Translatey ( -50%);-webkit-filter:None;Filter:None; }. Country:after{content: " ";position:Absolute;Top:0; Left:0; Right:0;Bottom:0;background-size:cover;-webkit-transition:0.5s ease-in-out;transition:0.5s ease-in-out;-webkit-filter:grayscale (100%);Filter:grayscale (100%); }. Country:hover{-webkit-flex-grow:6;-ms-flex-positive:6;Flex-grow:6; }. Country:hover:after{-webkit-filter:grayscale (0%);Filter:grayscale (0%); }@media All and (max-width:900px){. Country {Height:Auto; }}. Netherlands:after{Background-image:URL ("netherlands.png");background-position:Center; }. Belgium:after{Background-image:URL ("belgium-307_3.jpg");background-position:Center; }. France:after{Background-image:URL ("30.jpg");background-position:Center; }. Germany:after{Background-image:URL ("vacation.jpg");background-position:Center; }. England:after{Background-image:URL ("england.jpg");background-position:Center; }
Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/9889
A jquery-based accordion picture display effect