Achieve the accordion effect with pure CSS

Today, let's look at an accordion effect triggered by hover. When the mouse hover is used, the image width is changed and the animation is implemented with transition, as shown in. You can also go to my codepen to edit and download my favorites online.

Thanks to TheCodePlayer for its images and inspiration.

Let's take a look at html. We use ul and li to deploy the case. We need an image box and an image description box.

 
 

  
  
KungFu Panda
  
  
Toy Story 2
  
  
Wall-E
  
  
Up
  
  
Cars 2
 
 

Next, let's take a look at the CSS writing method. Here we use normalize.css and prefix free. First, Layout

/* Center the top box */. accordian {width: 850px;/* 850 = (800 + 2) * 5 + 20*2 */margin: 100px auto;}/* configure li */. accordian li {list-style: none; width: 160px; height: 320px; float: left; position: relative; overflow: hidden; border-left: 2px solid rgba (255,255,255 ,. 8);}/* configure the image information box */. accordian li. image_title {position: absolute; width: 100%; height: 50px; background-color: rgba (, 0, 0 ,. 5); text-indent: 2em; line-height: 50px; bottom: 0px; left: 0}/* change link */. accordian a {color: # fff; text-decoration: none ;}

Then let's take a look at the key: Set the status before and after the li hover. What we need to change is the li width. Before hover, all are 160px. After hover, the li width activated is 640px, and the rest are 40px.

/* Change all li widths after hover to 40px */. accordian ul: hover li {width: 40px;}/* The li width activated after the hover is 640px. Note that these two settings have a sequential order */. accordian ul li: hover {width: 640px ;}

At the same time, we need to add transition to li.

. Accordian li {/* Previous Code omitted * // * added the transition attribute */transition: all 2 s ;}

In this way, we have completed the entire effect. To optimize the effect, we have added Image filters before and after hover. Unfortunately, this effect is only known by the webkit kernel, for the future compatibility of the code, we have added standard attributes (although currently unavailable). The Code is as follows.

.accordian ul:hover li{  width:40px;  -webkit-filter:grayscale(.8);  filter:grayscale(.8);}.accordian ul li:hover{  width:640px;  -webkit-filter:grayscale(0) hue-rotate(300deg);  filter:grayscale(0) hue-rotate(300deg);}

Okay. The entire CSS file is as follows.

.accordian{  width:850px;  margin:100px auto;}.accordian li{  float:left;  list-style:none;  width:160px;  height：320px;  transition:all 2s;  position:relative;  overflow:hidden;  border-left:2px solid rgba(255,255,255,.8);  box-shadow:0px 0px 20px rgba(0,0,0,0.8);}.accordian ul:hover li{  width:40px;  -webkit-filter:grayscale(.8);  filter:grayscale(.8);}.accordian ul li:hover{  width:640px;  -webkit-filter:grayscale(0) hue-rotate(300deg);  filter:grayscale(0) hue-rotate(300deg);}.accordian li .image_title{  position:absolute;  width:100%;  height:50px;  background-color:rgba(0,0,0,.5);  text-indent:2em;  line-height:50px;  bottom:0px;  left:0}.accordian a{  color:#fff;  text-decoration:none;}

Considering the applicability of the case, for example, the photos may increase in the future. If LESS is used to change the case, the CSS part is partially corrected as follows.

// Number of images @ imageN: 5; // The total width before the image hover @ w: 800px; // The width after the image hover @ imageL: 640px; // image hover width @ imageS: @ w/@ imageN; // Border Width @ bdWidth: 2px; // shadow width @ shadowWidth: 20px ;. accordian {width: @ w + @ bdWidth * @ imageN + @ shadowWidth * 2; margin: 100px auto; ul li {float: left; list-style: none; width: @ imageS; transition: all 2 s; position: relative; overflow: hidden; border-left: 1px solid rgba (255,255,255 ,. 8); border-left-width: @ bdWidth; box-shadow: 0px 0px 20px rgba (0.8, 0 );. image_title {position: absolute; width: 100%; height: 50px; background-color: rgba (, 0, 0 ,. 5); text-indent: 2em; line-height: 50px; bottom: 0px; left: 0 a {color: # fff; text-decoration: none ;}} ul: hover li {width: @ imageS-@ imageL/@ imageN;-webkit-filter: grayscale (. 8); filter: grayscale (. 8);} ul li: hover {width: @ imageL;-webkit-filter: grayscale (0) hue-rotate (300deg); filter: grayscale (0) hue-rotate (300deg );}}

---------------------------------------------------------------

Front-end development of whqet, focus on web Front-end development technology, and share webpage-related resources.
---------------------------------------------------------------