<header>
<div class="container">
  <nav>
  <ul class="nav-container">
      <li class="nav-item"><a href="#">HOME</a></li>
      <li class="nav-item has-subnav">
        <a href="#">MOVIES</a>
            <div class="subnav">
              <ul>
               <li>Live Stream</li>
               <li>3D</li>
              </ul>
            </div>
      </li>
    <li class="nav-item"><a href="#">CONTACT</a></li>
    </ul>
  </nav>
</div>
</header>

<div class="accordion">
	<ul>
		<li>
			<div class="image_title">
				<a href="#">Transformers: The Last Knight</a>
			</div>
			<a href="https://ibb.co/gGv6QS"><img src="https://image.ibb.co/k7P0kS/transformers4_640x320.jpg" alt="transformers4_640x320" border="0"></a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Blade Runner 2049</a>
			</div>
			<a href="https://ibb.co/cXjfKn"><img src="https://image.ibb.co/ct9rQS/Blade_Runner2049_640x320.jpg" alt="Blade_Runner2049_640x320" border="0"></a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Guardians of the Galaxy: Vol. 2</a>
			</div>
			<a href="https://ibb.co/b4nLkS"><img src="https://image.ibb.co/jAu0kS/GOG2_640x320.jpg" alt="GOG2_640x320" border="0"></a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Spiderman: Homecoming</a>
			</div>
			<a href="https://ibb.co/mC5Uen"><img src="https://image.ibb.co/da7xX7/spiderman_homecoming_640x320.jpg" alt="spiderman_homecoming_640x320" border="0"></a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Wonder Woman</a>
			</div>
			<a href="https://ibb.co/enV1s7"><img src="https://image.ibb.co/dHdAkS/Wonder_Woman_640x320.jpg" alt="Wonder_Woman_640x320" border="0"></a>
		</li>
	</ul>
</div>
* {
	margin: 0; 
	padding: 0;
}

body {
	background-image: linear-gradient(to top, #13547a 0%, #80d0c7 100%); 
	font-family: 'Roboto', sans-serif;
}

.container {
  width: 100%;
}

a {
  text-decoration: none;
  color: white; 
}

nav {
  width: 100%;
  height: 70px;
}

.nav-container {
  width: 50%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-item {
  flex: 1;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.subnav {
  display: none;
  position: absolute;
  top: 100%;
  color: white; 
  width: 100%; 
  animation: BobbySnuggles; 
  animation-duration: .5s;
  animation-function: ease-in-out; 
}

.subnav li {
  padding: 20px;
  list-style: none;  
}

.nav-item.has-subnav:hover .subnav {
  display: inherit;
}

.nav-item.has-subnav {
  position: relative; 
}

/*Time to apply widths for accordian to work
Width of image = 640px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/

.accordion {
	width: 800px; height: 320px;
	overflow: hidden;
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accordion ul {
	width: 2000px;
}

.accordion li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	border-left: 1px solid #888;
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	transition: all 0.5s;
}

.accordion ul:hover li {width: 40px;}
.accordion ul li:hover {width: 640px;}
.accordion li img {
	display: block;
}

.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 10px;	
  width: 640px;	

}
.image_title a {
	display: block;
  text-align: center; 
	color: #fff;
	text-decoration: none;
	padding: 20px;
}

@keyframes BobbySnuggles {
  0% {
    opacity: 0;
    transform: rotate(15deg) scale(0);
  }
  100% {
    opacity: 1; 
    transform: rotate(0deg) scale(1);
  }
}

@media screen and (max-width: 500px) {
  nav {
    background: pink; 
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.