<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.