HTML
<ul>
<li>
<img src="https://goo.gl/sGrO7g" alt="">
<div class="info">
<p>Drama</p>
<div class="button"></div>
</div>
</li>
<li>
<img src="https://goo.gl/Cjq6Sj" alt="">
<div class="info">
<p>Action, Drama, Sci Fi</p>
<div class="button"></div>
</div>
</li>
</ul>
CSS
/* Some Resets */
body, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
/* I use flexbox, it makes aligning items easier */
body, ul, .info, .button {
display: flex;
flex-direction: row;
}
body {
width: 100%; height: 100vh;
background: rgb(240, 240, 240);
font: 400 1em 'Roboto', sans-serif; /* For the purpose of this example We'll put fonts in the body */
justify-content: center;
align-items: center;
}
li {
position: relative; /* Set the position of the parent element to relative*/
margin: 0 3em;
transition: transform .5s, box-shadow .5s; /* Never use transition all */
}
img {
width: 300px;
transition: transform .5s, box-shadow .5s;
}
.info {
z-index: -1; /* Put the info box behind the image */
background: white;
height: 5em;
position: absolute; /* This is relative to the main container, which is the li */
left: 0; right: 0; margin-left: aut0; margin-right: auto; /* This center aligns the info box */
bottom: 5em; /* Since the height is 5ems, this is push the box 5ems from the bottom, ultimately hidden it behind the img */
align-items: flex-end; /* Want all items to be at the bottom of the info div */
justify-content: space-between; /* This will put the p at the beginning and div of class button at the end */
transition: bottom .6s, box-shadow .6s;
}
.info p {
margin: 1.1em 1.25em;
color: lightslategray;
font-weight: 400;
}
.button {
height: 3.75em;
width: 6em;
align-items: center;
justify-content: center;
background: tomato;
color: white;
transition: background .5s;
}
/* This is a little work around for the button text animation */
.button::before {
content: "Watch";
transform:translatex(0.9em);
transition: transform .5s, opacity .5s, display .5s;
}
.button::after {
content: "Now";
opacity: 0;
transform: translatex(1.5em);
transition: transform .5s, opacity .5s, display .5s;
}
/* On Hover Animations */
.button:hover {
cursor: pointer;
background: lightslategray;
}
.button:hover::before {
transform: translatex(-1.5em);
opacity: 0;
}
.button:hover::after {
transform: translatex(-1.5em);
display: inline;
opacity: 1;
}
li:hover {
transform: scale(1.1);
}
li:hover img {
cursor: pointer;
box-shadow: 0 1em 2em rgba(0,0,0,0.2);
transform: scale(1.1);
}
li:hover .info {
bottom: -4.75em;
box-shadow: 0 1.5em 6em rgba(0,0,0,0.15);
}
