Cards Interaction with CSS

<ul> <li> <img src="" alt=""> <div class="info"> <p>Drama</p> <div class="button"></div> </div> </li> <li> <img src="" alt=""> <div class="info"> <p>Action, Drama, Sci Fi</p> <div class="button"></div> </div> </li> </ul>
/* 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); }
Expand for more options Login