1008b–[CSS] Photo Stack Effect 2

Media Files

No media files provided.

Project Submission

+ Submit Assignment

Your submissions

Background

It’s very similar to the test project 1008. This time we want to show the full pictures when mouse hovers on the photos.

We want to make the following effect:

See the Pen CSS Photo Stack Effect 2 by Thomas Seng Hin Mak (@makzan) on CodePen.

Requirement

Given the following HTML code:

<h1>Photos Stack</h1>
<div class='photo-stack'>
  <img src='http://placekitten.com/160/100'>
  <img src='http://placekitten.com/160/100?image=2'>
  <img src='http://placekitten.com/160/100?image=3'>
  <img src='http://placekitten.com/160/100?image=4'>
  <img src='http://placekitten.com/160/100?image=5'>
  <img src='http://placekitten.com/160/100?image=6'>
  <img src='http://placekitten.com/160/100?image=7'>
  <p>Album Title</p>
</div>

Help

❓ Show help content

Submission guideline

  • You may use Codepen to implement it and submit the link.
  • You may implement them in file and attach the HTML/CSS file via submission.