Select Language

Activity

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

Image Accordion

A nice experimental and playful CSS only image accordion. Can be used for many purposes. Background images are added with js, so you don't have to change any CSS. Images simply stack on mobile. Check markup for more details about usage.


      <div class="image-accordion">
          <ul>
              <li class="has-background-image" tabindex="1" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>Office Part I</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
              <li class="has-background-image" tabindex="2" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>Office Part II</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
              <li class="has-background-image" tabindex="3" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>12 Great Landscapes</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
              <li class="has-background-image" tabindex="4" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>Team Meetup</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
              <li class="has-background-image" tabindex="5" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>Purple Shades</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
              <li class="has-background-image" tabindex="6" data-background="https://via.placeholder.com/800x600">
                  <div>
                      <a>
                          <h2>Blue Note</h2>
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
                      </a>
                  </div>
              </li>
          </ul>
      </div>