The Power of Pure CSS - No JavaScript Needed

<title>Accordian</title>
  
  
<div class="collapse-content">
	<div class="collapse" id="instagram">
		<a class="instagram" href="#instagram"><i class="fab fa-instagram"></i> Instagram</a>
      	<div class="content">
         	<div class="inner-content">
            	<h3>Instagram</h3>
              	Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            	nobis iusto deleniti corporis alias quo a quam similique cupiditate
               pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores
            	ut, distinctio placeat. Magni dolores perferendis ab laborum in
            	neque, non exercitationem!
          	</div>
        	</div>
      </div>
  
<div class="collapse" id="twitter">
	<a class="twitter" href="#twitter"><i class="fab fa-twitter"></i> Twitter</a>
   	<div class="content">
      	<div class="inner-content">
         	<h3>Twitter</h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            nobis iusto deleniti corporis alias quo a quam similique cupiditate
            pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores
            ut, distinctio placeat. Magni dolores perferendis ab laborum in
            neque, non exercitationem!
			</div>
	</div>
</div>
  
<div class="collapse" id="dribbble">
	<a class="dribbble" href="#dribbble"><i class="fab fa-dribbble"></i> Dribble</a>
		<div class="content">
			<div class="inner-content">
            <h3>Dribbble</h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            nobis iusto deleniti corporis alias quo a quam similique cupiditate
            pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores
            ut, distinctio placeat. Magni dolores perferendis ab laborum in
            neque, non exercitationem!
          </div>
	</div>
</div>
      
<div class="collapse" id="youtube">
	<a class="youtube" href="#youtube"><i class="fab fa-youtube"></i> Youtube</a>
		<div class="content">
      	<div class="inner-content">
            <h3>Youtube</h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero
            nobis iusto deleniti corporis alias quo a quam similique cupiditate
            pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores
            ut, distinctio placeat. Magni dolores perferendis ab laborum in
            neque, non exercitationem!
				</div>
		</div>
</div>
  
</div>

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  list-style: none;
  text-decoration: none;
}

body {
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(to bottom right, #114357 60%, #f29492);
  line-height: 1.6;
}

.collapse-content {
  width: 50vw;
  margin: auto;
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}

.collapse {
  background: #fff;
}

.collapse a {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.9rem 1.8rem;
  color: #fff;
  position: relative;
}

.collapse a.instagram {
  background: #db2e7d;
}

.collapse a.twitter {
  background: #1dabdd;
}

.collapse a.dribbble {
  background: #444;
}

.collapse a.youtube {
  background: #ff0000;
}

.collapse a:before {
  content: "";
  border-top: 7px solid #fff;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  position: absolute;
  top: 25px;
  right: 30px;
}

.inner-content {
  padding: 1.8rem;
}

.content {
  max-height: 0em;
  transition: 0.3s linear 0s;
  overflow: hidden;
}

.collapse + .collapse a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

h3 {
  margin-bottom: 15px;
}

.collapse:target .content {
  max-height: 15em;
}

.collapse:target a:before {
  transform: rotate(-90deg);
}

@media (max-width: 768px) {
  .collapse-content {
    width: 80vw;
    margin: auto;
    box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  }
}
@media (max-width: 425px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 1.2rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}
@media (max-width: 320px) {
  body {
    line-height: 1.3;
  }
  .collapse-content {
    width: 80vw;
  }
  .inner-content {
    padding: 0.8rem;
  }
  .inner-content h3 {
    margin-bottom: 0.3rem;
  }
}

22

Collapsing Accordion Pure CSS

By: pixeldev

20

Pure CSS Horizontal Accordion

By: pixeldev

.accordion {
  width: 100%;
  max-width: 1080px;
  height: 250px;
  overflow: hidden;
  margin: 50px auto;
}

.accordion ul {
  width: 100%;
  display: table;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.accordion ul li {
  display: table-cell;
  vertical-align: bottom;
  position: relative;
  width: 16.666%;
  height: 250px;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 500ms ease;
}

.accordion ul li div {
  display: block;
  overflow: hidden;
  width: 100%;
}

.accordion ul li div a {
  display: block;
  height: 250px;
  width: 100%;
  position: relative;
  z-index: 3;
  vertical-align: bottom;
  padding: 15px 20px;
  box-sizing: border-box;
  color: #fff;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  transition: all 200ms ease;
}

.accordion ul li div a * {
  opacity: 0;
  margin: 0;
  width: 100%;
  text-overflow: ellipsis;
  position: relative;
  z-index: 5;
  white-space: nowrap;
  overflow: hidden;
  -webkit-transform: translateX(-20px);
  transform: translateX(-20px);
  -webkit-transition: all 400ms ease;
  transition: all 400ms ease;
}

.accordion ul li div a h2 {
  font-family: Montserrat, sans-serif;
  text-overflow: clip;
  font-size: 24px;
  text-transform: uppercase;
  margin-bottom: 2px;
  top: 160px;
}

.accordion ul li div a p {
  top: 160px;
  font-size: 13.5px;
}

.accordion ul li:nth-child(1) { background-image: url("https://unsplash.it/650/250?image=680"); }

.accordion ul li:nth-child(2) { background-image: url("https://unsplash.it/650/250?image=668"); }

.accordion ul li:nth-child(3) { background-image: url("https://unsplash.it/650/250?image=659"); }

.accordion ul li:nth-child(4) { background-image: url("https://unsplash.it/650/250?image=655"); }

.accordion ul li:nth-child(5) { background-image: url("https://unsplash.it/650/250?image=657"); }

.accordion ul li:nth-child(6) { background-image: url("https://unsplash.it/650/250?image=661"); }

.accordion ul:hover li { width: 8%; }

.accordion ul:hover li:hover { width: 60%; }

.accordion ul:hover li:hover a { background: rgba(0, 0, 0, 0.4); }

.accordion ul:hover li:hover a * {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
 @media screen and (max-width: 600px) {

body { margin: 0; }

.accordion { height: auto; }

.accordion ul li,
.accordion ul li:hover,
.accordion ul:hover li,
.accordion ul:hover li:hover {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  -webkit-transition: none;
  transition: none;
}
}

.about {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  color: #666;
}

.about a {
  color: blue;
  text-decoration: none;
}

.about a:hover { text-decoration: underline; }

19

Pure CSS Horizontal Responsive Image Accordion Slider

By: pixeldev

<div class="accordion">
	<div class="accordion-collapse" id="instagram">
		<a href="#instagram" class="instagram">
			<i class="fab fa-instagram"></i>instagram
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>instagram</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="twitter">
		<a href="#twitter" class="twitter">
			<i class="fab fa-twitter"></i>twitter
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>twitter</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="dribble">
		<a href="#dribble" class="dribble">
			<i class="fab fa-dribbble"></i>dribble
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>dribble</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
	<div class="accordion-collapse" id="youtube">
		<a href="#youtube" class="youtube">
			<i class="fab fa-youtube"></i>youtube
		</a>
		<div class="accordion-collapse-content">
			<div class="inner-content">
				<h3>youtube</h3>
				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero nobis iusto deleniti corporis alias quo a quam similique cupiditate pariatur aliquid, omnis, officia dicta officiis impedit nisi dolores ut, distinctio placeat. Magni dolores perferendis ab laborum in neque, non exercitationem!</p>
			</div>
		</div>
	</div>
	
</div>

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 1.4rem;
  line-height: 1.6;
  background: linear-gradient(to bottom right, #ccc 80%, #ddd);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

h1,
h2,
h3 {
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

a {
  text-decoration: none;
  color: #333;
}

.accordion {
  width: 50vw;
}

.accordion-collapse {
  background: #fff;
}

.accordion-collapse:target .accordion-collapse-content {
  height: 15rem;
}

.accordion-collapse:target a::before {
  transform: translateY(-50%) rotate(-90deg);
}

.accordion-collapse:not(:first-child) a {
  border-top: 1px solid rgba(255, 255, 255, 0.7);
}

.accordion-collapse a {
  display: block;
  font-size: 1.6rem;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
  padding: 2rem;
  position: relative;
}

.accordion-collapse a::before {
  content: "";
  border-top: 0.7rem solid #fff;
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  position: absolute;
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
  transition: transform 500ms ease-in-out;
}

.accordion-collapse a i {
  margin-right: 0.5rem;
}

.accordion-collapse a.instagram {
  background: #db2e7d;
}

.accordion-collapse a.twitter {
  background: #1dabdd;
}

.accordion-collapse a.dribble {
  background: #444;
}

.accordion-collapse a.youtube {
  background: #ff0000;
}

.accordion-collapse-content {
  height: 0;
  overflow: hidden;
  transition: height 500ms cubic-bezier(0.175, 0.685, 0.32, 1.275);
}

.accordion-collapse-content .inner-content {
  padding: 2rem;
}

.accordion-collapse-content h3 {
  font-size: 1.8rem;
  text-transform: capitalize;
}

/* Media Queries */
@media screen and (max-width: 778px) {
  .accordion {
    width: 80vw;
  }

.accordion-collapse:target .accordion-collapse-content {
    height: 17rem;
  }
}

@media screen and (max-width: 530px) {
  .accordion {
    width: 95vw;
  }

.accordion-collapse:target .accordion-collapse-content {
    height: 25rem;
  }
}

18

Pure css accordion with bounce effect

By: pixeldev

<div>
  <h1>à l'affiche!</h1>
  <h2>cette semaine…</h2>
</div>
<div>
  <article>
    <h2>Lundi</h2>
    <div>
      <h3>lundi 28 août 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Mardi</h2>
    <div>
      <h3>Mardi 29 août 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Mercredi</h2>
    <div>
      <h3>Mercredi 30 août 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Jeudi</h2>
    <div>
      <h3>Jeudi 31 août 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Vendredi</h2>
    <div>
      <h3>Vendredi 1er Septembre 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Samedi</h2>
    <div>
      <h3>Samedi 2 Septembre 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
  <article>
    <h2>Dimanche</h2>
    <div>
      <h3>Dimanche 3 Septembre 2017</h3>
      <p>Th'art nesh thee nay lad soft lad wacken thi sen up t'foot o' our stairs. Nay lad where's tha bin. Th'art nesh thee a pint ‘o mild any rooad t'foot o' our stairs. Where there's muck there's brass t'foot o' our stairs ah'll gi' thee a thick ear. Ah'll learn thi tintintin tell thi summat for nowt soft lad mardy bum. Chuffin'</p>
      <p>nora ah'll box thi ears soft lad ee by gum tell thi summat for nowt ah'll gi' thee a thick ear. Bobbar nay lad. Breadcake soft southern pansy wacken thi sen up. Be reet where's tha bin mardy bum mardy bum. Tell thi summat for nowt where there's muck there's brass shu' thi gob. Dahn t'coil oil. That's champion ey up will ‘e ‘eckerslike shurrup by ‘eck. Eeh. Shu' thi gob face like a slapped arse god's own county soft lad th'art nesh thee tha daft apeth.</p>
    </div>
  </article>
</div>

body {
  background: #801638;
  --nb-of-tabs: 6;
  --open-tab-width: 60%;
}

body,
body > * {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-weight: normal;
}

* {
  transition: all .3s ease 0s;
}

/* Background colours */

div + div article:nth-child(1) {
  background: #c22326;
}

div + div article:nth-child(2) {
  background: #f37338;
}

div + div article:nth-child(3) {
  background: #fdb632;
}

div + div article:nth-child(4) {
  background: #027878;
}

div + div article:nth-child(5),
div + div {
  background: #801638;
}

div + div article:nth-child(6) {
  background: #000;
}

div + div article:nth-child(7),
div + div {
  background: #fff;
  color: #000;
}

/* Main layout */

html,
body,
div + div {
  width: 100vw;
  height: 100vh;
}

div + div {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
}

/* Articles */

div + div article {
  flex: initial;
  width: calc( 100% / var(--nb-of-tabs) );
  height: 100%;
  text-align: center;
  color: #fff;
  text-decoration: none;
  vertical-align: bottom;
  box-sizing: border-box;
  padding: 2vh 1vw;
  position: relative;
}

/* Big Headings */

body > div:first-child {
  position: fixed;
  bottom: 8vh;
  background: #fff;
  width: 100%;
  text-align: center;
  padding: .5rem;
  z-index: 2;
}

body > div:first-child h1,
body > div:first-child h2 {
  margin: 0;
  padding: 0;
}

/* Hover interaction */

div + div:hover article {
  flex: initial;
  width: calc( (100% - var(--open-tab-width) ) / (var(--nb-of-tabs) - 1 ) );
}

div + div article:hover {
  width: var(--open-tab-width);
}

article > div {
  opacity: 0;
  transition: opacity .2s ease 0;
}

div + div article:hover > div {
  opacity: 1;
  transition: opacity .3s ease .3s;
}

/* navigation */

div + div article > h2 {
  bottom: 2vh;
  position: absolute;
  text-align: center;
  width: 100%;
  margin: 0;
  font-size: 3vh;
}

/* Article layouts */

article div {
  text-align: left;
  width: 58vw;
}

article div p,
article div div h2,
article div h3 {
  margin: 0 0 1em 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: uppercase;
}

article div p {
  width: 40vw;
}

@media (max-width: 1000px) {
  div + div article {
    padding: 2vh 3vw;
  }
  div + div article > h2 {
    transform: rotate(90deg);
    bottom: 23vh;
    min-width: 12em;
    text-align: left;
    transform: rotate(-90deg);
    transform-origin: 0 0 0;
    opacity: 1;
  }
  div + div article:hover > h2 {
    opacity: 0;
  }
  article div p {
    width: 50vw;
  }
  article div {
    max-height: calc(72%);
    overflow-y: auto;
  }
}

16

Flexbox Based Vertical Accordion With Pure CSS

By: pixeldev

<ul id="accordion">
		<li>
			<h2>Title One</h2>
			<div class="content">
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
			</div>
		</li>
		<li>
			<h2>Title Two</h2>
			<div class="content">
				Tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.
			</div>
		</li>
		<li>
			<h2>Title Three</h2>
			<div class="content">
				Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
			</div>
		</li>
		<li>
			<h2>Title Four</h2>
			<div class="content">
				Consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
			</div>
		</li>
	</ul>

</div>

16

Pure CSS Accordion hover

By: pixeldev

<h1>FAQ</h1>
<details>
  <summary>Here is a question?</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Hey!</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Another Question</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Not Quite There</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Need More Help?</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum repellendus aliquid eligendi nisi ratione maxime natus sed sit cupiditate, harum exercitationem vel quasi numquam fuga tempora in nobis esse rerum nam dolore aliquam! Autem ex architecto error vel ad? Pariatur, non veniam laudantium minima nemo maxime nam nostrum necessitatibus iure itaque ratione doloribus libero harum omnis excepturi! Ad, voluptatum aliquam.
    </p>
  </div>
</details>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  padding: 5em;
  margin: 0;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}

details summary {
  padding: 1rem;
  background: rgb(255, 234, 213);
  margin-bottom: 1em;
  cursor: pointer;
  outline: none;
  border-radius: 0.3em;
  font-weight: bold;
  transition: background-color 0.3s;
}

details summary:focus,
details summary:hover {
  background: rgb(210, 189, 168);
}

details summary:after {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  content: "\f0ab"; /* Initial icon */
  float: right;
}

details summary::-webkit-details-marker {
  color: transparent;
}

details[open] summary:after {
  content: "\f0aa"; /* Change icon when open */
}

details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

16

Pure CSS Accordion with Animation

By: pixeldev

<div class="wrapper">
        
            <li class="item" id="account">
                <a href="#account" class="btn"><i class="fas fa-user-circle"></i>My Account</a>
                <div class="subMenu">
                    <a href="">item-1</a>
                    <a href="">item-2</a>
                    <a href="">item-3</a>
                </div>
            </li>
            <li class="item" id="about">
                <a href="#about" class="btn"><i class="fas fa-address-card"></i>About</a>
                <div class="subMenu">
                    <a href="">item-1</a>
                    <a href="">item-2</a>
                </div>
            </li>
            <li class="item" id="support">
                <a href="#support" class="btn"><i class="fas fa-info"></i>Support</a>
                <div class="subMenu">
                    <a href="">item-1</a>
                </div>
            </li>
            <li class="item">
                <a href="#" class="btn"><i class="fas fa-sign-out-alt"></i>Log Out</a>
            </li>
        
    </div>

*{
    margin: 0;
    padding: 0;
    font-family: 'lato';
    list-style: none;
    text-decoration: none;
}
body{
    background-color: #fcdc29;
}

.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.mainMenu{
    width: 250px;
    display: block;
    border-radius: 10px;
    overflow: hidden;
}
.item{
    border-top: 1px solid #ef584a;
    overflow: hidden;
}
.btn{
    display: block;
    padding: 15px 20px;
    background-color: #ff6f61;
    color: #fff;
    position: relative;

}
.btn:before{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right:8px solid transparent;
    border-top:10px solid #ff6f61;
    right: 15px;
    bottom: -10px;
    z-index: 9;
    
}
.btn i {
    margin-right: 10px;
}
.subMenu{
    background: #273057;
    overflow: hidden;
    transition: max-height 0.7s;
    max-height: 0;
}
.subMenu a{
    display: block;
    padding: 15px 20px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid #394c7f;
    position: relative;
    
}
.subMenu a:before{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.subMenu a:hover:before{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    left: 0;
    top:0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-left: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}
.subMenu a:after{
    content: '';
    opacity: 0;
    transition: opacity 0.3s;

}
.subMenu a:hover:after{
    content: '';
    position: absolute;
    height: 0;
    width: 6px;
    right: 0px;
    top:0;
    opacity: 1;
    /* background-color: #d8d824; */
    border-top: 24px solid transparent;
    border-right: 11px solid #fcdc29;
    border-bottom: 24px solid transparent;
}
.subMenu a:hover{
    background: #273057;
    background: -moz-linear-gradient(top, #273057 0%, #273057 50%, #394c7f 51%, #394c7f 100%);
    background: -webkit-linear-gradient(top, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
    background: linear-gradient(to bottom, #273057 0%,#273057 50%,#394c7f 51%,#394c7f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#273057', endColorstr='#394c7f',GradientType=0 );
    transition: all 0.3s;
    border-bottom: 1px solid #394c7f;
}
.subMenu a:last-child{
    border:none;
}
.item:target .subMenu{
    max-height: 10em;
}

/*  footer   */
footer {
    background-color: #222;
    color: #fff;
    font-size: 14px;
    bottom: 0;
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999;
}

footer p {
    margin: 10px 0;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida  Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
footer .fa-heart{
    color: red;
}
footer .fa-dev{
    color: #fff;
}
footer .fa-twitter-square{
  color:#1da0f1;
}
footer .fa-instagram{
  color: #f0007c;
}
fotter .fa-linkedin{
  color:#0073b1;
}
footer .fa-codepen{
  color:#fff
}
footer a {
    color: #3c97bf;
    text-decoration: none;
  margin-right:5px;
}
.youtubeBtn{
    position: fixed;
    left: 50%;
  transform:translatex(-50%);
    bottom: 45px;
    cursor: pointer;
    transition: all .3s;
    vertical-align: middle;
    text-align: center;
    display: inline-block;
}
.youtubeBtn i{
   font-size:20px;
  float:left;
}
.youtubeBtn a{
    color:#ff0000;
    animation: youtubeAnim 1000ms linear infinite;
  float:right;
}
.youtubeBtn a:hover{
  color:#c9110f;
  transition:all .3s ease-in-out;
  text-shadow: none;
}
.youtubeBtn i:active{
  transform:scale(.9);
  transition:all .3s ease-in-out;
}
.youtubeBtn span{
    font-family: 'Lato';
    font-weight: bold;
    color: #000;
    display: block;
    font-size: 12px;
    float: right;
    line-height: 20px;
    padding-left: 5px;
  
}

@keyframes youtubeAnim{
  0%,100%{
    color:#c9110f;
  }
  50%{
    color:#ff0000;
  }
}
/* footer  */

15

Awesome accordion menu using only HTML & CSS

By: pixeldev

<div class="container">
		<section>
			<details>
				<summary>Accordion menu 1</summary>
				<div class="discuss">
					<h1>Accordion details 1</h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
				</div>
			</details>

<details>
				<summary>Accordion menu 2</summary>
				<div class="discuss">
					<h1>Accordion details 2</h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
				</div>
			</details>

<details>
				<summary>Accordion menu 3</summary>
				<div class="discuss">
					<h1>Accordion details 3</h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
				</div>
			</details>

<details>
				<summary>Accordion menu 4</summary>
				<div class="discuss">
					<h1>Accordion details 4</h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
				</div>
			</details>

<details>
				<summary>Accordion menu 5</summary>
				<div class="discuss">
					<h1>Accordion details 5</h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Enim officiis, quod impedit repellat nesciunt eligendi vero sed provident quae officia!</p>
				</div>
			</details>
		</section>
	</div>

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	background: #00cccc;
	padding-bottom: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.container section {
	width: 700px;
	margin: 5px;
	box-shadow: 0 5px 10px #3334;
}

.container section details summary {
	padding: 15px;
	background: #008b8b;
	color: #fff;
	border: 1px solid #444;
	position: relative;
	list-style: none;
	outline: none;
	cursor: pointer;
	font-size: 20px;
}

.container section details .discuss {
	padding: 5px 15px 10px 15px;
	color: #444;
	background: #e6ffff;
}

.container section details summary::after {
	content: "+";
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 30px;
	color: #fff;
	transition: .2s linear;
}

.container section details[open] summary::after {
	transform: rotate(135deg);
}

.container section details[open] summary {
	background: #006666;
}

.container section details[open] summary ~ * {
  animation: sweep .7s ease-in-out;
}

@keyframes sweep {
  0%    {opacity: 0; transform: translateY(60px)}
  100%  {opacity: 1; transform: translateY(0)}
}

14

Animated accordion – pure html css

By: pixeldev

<main>
    <h1>CSS only accordion, nearly accessible</h1>
    
    <label for="tota11y-open-close">Expand all sections?</label>
    
    <ul class="tota11y-accordion" aria-label="FAQs accordion">
        <li>
            <a href="#acc1" id="#accLink1">Short Item, No Scroll</a>
            <section class="content" id="acc1" aria-labelledby="accLink1">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </section>
        </li>
        <li>
            <a href="#acc2" id="#accLink2">Long Item, Has Scroll, No Focusable Content</a>
            <section class="content" id="acc2" aria-labelledby="accLink2">
                <ul>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </section>
        </li>
        <li>
            <a href="#acc3" id="#accLink3">Long Item, Has Scroll, Focusable Content</a>
            <section class="content" id="acc3" aria-labelledby="accLink3">
                <ul>
                    <li>Item <a href="#">Focusable link</a></li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                    <li>Item</li>
                </ul>
            </section>
        </li>
    </ul>
</main>

:root {
    --ta11y-open-duration: 0.5s;
}

body {
    font-size: 18px;
    background: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
        "Helvetica Neue", sans-serif;
    color: white;
    padding: 30px;
}

a {
    color: white;
}

.tota11y-accordion > li > a {
    padding: 2rem 1.5rem;
    display: block;
    color: white;
    position: relative;
    cursor: pointer;
    outline: transparent;
    text-decoration: none;
}

.tota11y-accordion > li {
    max-width: 800px;
    box-sizing: border-box;
    margin-top: 10px;
    border-radius: 1rem;
    background: #151618;
    box-shadow: 0px 0px 0px 0px #333;
    display: grid;
    grid-template-rows: min-content 0fr;
    transition: box-shadow 0.3s 0s ease,
        grid-template-rows var(--ta11y-open-duration);
}
.tota11y-accordion > li:focus-within {
    box-shadow: 0 0 0 4px #000, 0 0 0 6px #2cdce6;
}
.tota11y-accordion > li:has(.content:target) > a:before,
.tota11y-accordion > li:has(.content:focus-within) > a:before {
    transform: rotate(180deg);
}

.tota11y-accordion > li > a:before {
    content: "";
    opacity: 0.6;
    background-image: url("https://assets.codepen.io/7212043/rounded-arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    position: absolute;
    top: 1.8rem;
    right: 1.5rem;
    transform: rotate(0deg);
    transform-origin: 1rem 50%;
    transition: 0.25s transform ease;
}

.tota11y-accordion > li .content {
    border-top: none;
    margin: 0 1rem;
    padding: 0 0.5rem;
    border-top: none;
    color: #a9abb3;
    visibility: hidden;
    display: grid;
    overflow: hidden;
    transition: margin var(--ta11y-open-duration) linear,
        padding var(--ta11y-open-duration) linear;
    max-height: 200px;
}
.tota11y-accordion > li .content::-webkit-scrollbar {
    width: 14px;
}
.tota11y-accordion > li .content::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    background-color: #f5f5f5;
}

.tota11y-accordion > li .content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #555;
}
@keyframes show-scroll {
    0% {
        overflow-y: hidden;
    }
    0.2% {
        overflow-y: auto;
    }
    to {
        overflow-y: auto;
    }
}
.tota11y-accordion > li .content:focus {
    outline: none;
}
.tota11y-accordion > li:has(.content:target),
.tota11y-accordion > li:has(.content:focus-within) {
    grid-template-rows: min-content 1fr;
}
.tota11y-accordion > li:has(.content:target) .content,
.tota11y-accordion > li:has(.content:focus-within) .content {
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll; 
    overflow-y: auto;
    
}

@media (prefers-reduced-motion) {
    :root {
        --ta11y-open-duration: 0s;
    }
    .tota11y-accordion > li:has(.content:target) .content,
    .tota11y-accordion > li:has(.content:focus-within) .content {
        overflow-y: auto;
    }
    .tota11y-accordion > li > a:before {
        transition: none;   
    }
}

label{
    line-height: 1.5rem;
    display: inline-block;
    vertical-align: middle;
}

#tota11y-open-close{
    height: 1.5rem;
    width: 1.5rem;
    vertical-align: middle;
    accent-color: #555;
}

#tota11y-open-close:checked ~ ul>li{
    grid-template-rows: min-content 1fr;
}

#tota11y-open-close:checked ~ ul>li>.content{
    visibility: visible;
    margin: 0.5rem 1rem 2rem 1rem;
    padding: 0.5rem;
    animation-duration: calc(2000 * var(--ta11y-open-duration));
    animation-name: show-scroll;
}

/* we can open all of the accordion items easily with the @media print media query if we wish */
@media print {
    .tota11y-accordion > li {
        grid-template-rows: min-content 1fr;
    }
    .tota11y-accordion > li .content {
        visibility: visible;
        margin: 0.5rem 1rem 2rem 1rem;
        padding: 0.5rem;
        max-height: none;
    }
    /* ideally we would also remove all of the bg-color etc. to save ink, but that is specific to this colour scheme and so not relevant in the demo */
}

13

Animated Pure CSS accordion

By: pixeldev

<details>
  <summary>Item 1</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 2</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>
<details>
  <summary>Item 3</summary>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
</details>

html, body {color: #fff; background-color: #131417; padding: 15px;}

$fluent-timing: cubic-bezier(.16,1,.29,.99);

@mixin bezier-trans($style: all) {
  $style: unquote($style);
  transition-property: $style;
  transition-duration: .4s;
  transition-timing-function: $fluent-timing;
}

@keyframes fontSizeIn {
	0% {
    font-size: 0;
    opacity: 0;
	}

100% {
    font-size: initial;
    opacity: 0; 
	}
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

100% {
		opacity: 1;
	}
}

details {
  width: 750px;
  margin: auto;

+ details {
    margin-top: 15px;
  }

::-webkit-details-marker {
    display: none; // Hide marker for Blink and Webkit
  }

summary {
    list-style-type: none; // Hide marker for Gecko
    cursor: pointer;
    padding: 5px;

&::after {
      content: "\f107";
      font-family: "Font Awesome 5 Pro";
      display: block;
      float: right;

@include bezier-trans();
    }

+ div {
      margin-top: 10px;
      padding: 5px;
    }
  }

&[open] {
    summary::after {
      transform: rotate(180deg);
    }
 
    div {
      animation-name: fontSizeIn, fadeIn;
      animation-duration: 160ms, 160ms;
      animation-delay: 0ms, 160ms;
    }
  }
}

12

Pure CSS Animated Accordion

By: pixeldev

</div>
    <div class="title">
      <h3 class="main-title">Spring</h3>
      <h4 class="subtitle">A flower blossoms for its own joy.
      </h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 2" class="background-photo" src="https://images.unsplash.com/photo-1491929007750-dce8ba76e610?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=747&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">Summer</h3>
      <h4 class="subtitle">Every summer has a story.</h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 3" class="background-photo" src="https://images.unsplash.com/photo-1459478309853-2c33a60058e7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">fall</h3>
      <h4 class="subtitle">Life starts all over when it gets crisp in the fall.</h4>
    </div>
  </div>
  <div class="item">
    <div class="photo"><img alt="Photo 4" class="background-photo" src="https://images.unsplash.com/photo-1457269449834-928af64c684d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80"></div>
    <div class="overlay"></div>
    <div class="title">
      <h3 class="main-title">winter</h3>
      <h4 class="subtitle">When snow falls, nature listens.</h4>
    </div>
  </div>
</div>

/* BY Mostafa Alvandi*/

/*
FONTS
*/

@import url("https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500;700&display=swap");

/*
RESET
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
LAYOUT
*/

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(
      to right,
      rgba(28, 103, 99, 0.4),
      rgba(12, 71, 70, 0.6)
    ),
    url("https://images.unsplash.com/photo-1457269449834-928af64c684d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80")
      no-repeat center center/cover;
  font-family: "Baloo Tammudu 2", cursive;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  height: 60%;
  width: 95%;
  padding: 1rem;
}

.item {
  flex: 0 0 12%;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55), -1px -1px 2px rgba(0, 0, 0, 0.51);
  transition: 0.5s;
}

.photo {
  height: 100%;
  width: 100%;
}

img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: blur(1px);
  transition: 0.5s;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10;
  opacity: 0;
  transition: 1s;
}

.title {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 20;
  padding: 1rem;
}
.main-title {
  color: aliceblue;
  text-transform: uppercase;
  text-shadow: 1px 1px 5px rgba(45, 44, 44, 0.77),
    -1px 2px 1px rgba(50, 50, 50, 0.8);
  transform-origin: top left;
  transition: 0.5s;
}

.subtitle {
  position: absolute;
  bottom: 1rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  padding-right: 1rem;
  color: aliceblue;
  text-shadow: 1px 1px 5px black;
  opacity: 0;
  transform: scale(0) translateY(2rem);
  transition: transform 0.1s 0.2s, opacity 0.1s 0.4s;
}

/*
ANIMATIONS
*/

.item:hover {
  flex: 1;
}

.item:hover .overlay {
  background-image: linear-gradient(
    to top,
    rgb(2, 2, 2),
    rgba(47, 46, 46, 0) 30%
  );
  opacity: 1;
  transition: 0.8s;
}

.item:hover .main-title {
  transform: scale(2);
}

.item:hover .subtitle {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.item:hover img {
  filter: blur(0);
}

10