Stunning Portfolio List Design

In this post, we will create a stunning portfolio list page design by using HTML, CSS, and Javascript.

In the demo, we have two sections. On the left side, we have a list of the projects and on the right side, we have a project image with a dynamic background.

First, we will create a list item and then we will design the project grid and then apply the hover animation using JS & CSS.

Let's start with the HTML Structure.

HTML Layout

<div class="portfolio">
    <!-- List items -->
    <ul class="portfolio-list">
    .. content ..
    </ul>
    <!-- Proejct Iamges with dynamic bg -->
    <div class="portfolio-projects" style="--background-clr: rgb(253, 190, 51);">
    .
    ..content..
    .
    </div>
</div>

HTML List Items

<ul class="portfolio-list">
  <li>
    <a class="active" href="javascript:;" dd-id="i1" dd-bg="rgb(253, 190, 51)">The Egg Shop</a>
    <span>/Website + App</span>
  </li>
  <li>
    <a href="javascript:;" dd-id="i2" dd-bg="rgb(174, 193, 225)">Tasker App</a>
    <span>/App</span>
  </li>
  <li>
    <a href="javascript:;" dd-id="i3" dd-bg="rgb(139, 188, 126)">E Agro Plants</a>
    <span>/Graphics</span>
  </li>
  <li>
    <a href="javascript:;" dd-id="i4" dd-bg="rgb(189, 151, 115)">Little Cart</a>
    <span>/E-Commerce</span>
  </li>
  <li>
    <a href="javascript:;" dd-id="i5" dd-bg="rgb(224, 122, 102)">Pr Jewellery</a>
    <span>/Website</span>
  </li>
  <li>
    <a href="javascript:;" dd-id="i6" dd-bg="rgb(26, 146, 144)">Dr Furniture</a>
    <span>/Website + App</span>
  </li>
</ul>

HTML Markup for proejct images

<div class="portfolio-projects" style="--background-clr: rgb(253, 190, 51);">
  <img class="active" id="i1" src="images/amy-shamblen-cN4OA8gdCx4-unsplash.jpg" alt="">
  <img id="i2" src="images/kobu-agency-qj15uNotnH0-unsplash.jpg" alt="">
  <img id="i3" src="images/igor-son-FV_PxCqgtwc-unsplash.jpg" alt="">
  <img id="i4" src="images/malvestida-magazine-u79wy47kvVs-unsplash.jpg" alt="">
  <img id="i5" src="images/stil-D4jRahaUaIc-unsplash.jpg" alt="">
  <img id="i6" src="images/toa-heftiba-FV3GConVSss-unsplash.jpg" alt="">
</div>

CSS Styles

/* List items */
.portfolio-list {
  position: absolute;
  list-style: none;
  padding: 4rem 10%;
  margin: 0;
  z-index: 9;
}
.portfolio-list li {
  position: relative;
  padding-bottom: 4rem;
}
.portfolio-list li a {
  display: inline-block;
  font-family: var(--ff);
  font-weight: 700;
  font-size: 8vh;
  text-decoration: none;
  color: #333;
  z-index: 9;
  transition: all .3s;
}
.portfolio-list li span {
  position: absolute;
  left: 0;
  bottom: 50px;
  font-family: var(--ff);
  font-size: 1.25rem;
  font-weight: 600;
  color: #4c4c4c;
}
.portfolio-list li span::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  transition: all .5s;
  height: 100%;
  background-color: var(--bg);
}
.portfolio-list li a:hover + span::after {
  left: 100%;
  width: 0;
}
.portfolio-list li a.active {
  color: #fff;
}
/* Projects */
.portfolio-projects {
  position: fixed;
  right: 0;
  width: 70%;
  height: 70%;
  background: var(--background-clr);
  top: 50%;
  transform: translateY(-50%);
  transition: all .5s;
}
/* Project image */
.portfolio-projects img {
  object-fit: cover;
  height: 500px;
  width: 750px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%) scale(.95);
  visibility: hidden;
  opacity: 0;
  transition: all .5s;
}
.portfolio-projects img.active {
  visibility: visible;
  opacity: 1;
  transform: translate(-40%, -50%) scale(1);
}

CSS Media Query

/* Media query */
@media (min-width: 768px) and (max-width: 1400px) {
  .portfolio-list {
    padding: 3rem 5%;
  }
  .portfolio-list li a {
    font-size: 5rem;
  }
  .portfolio-projects img {
    width: 100%;
  }
}
/* For smaller devices */
@media (max-width: 768px) {
  .portfolio-list {
    padding: 2rem;
    width: 100%;
    box-sizing: border-box;
    margin-top: var(--cover-poster-height);
  }
  .portfolio-list li a {
    font-size: 3rem;
  }
  .portfolio-projects {
    top: 0;
    transform: inherit;
    width: 100%;
    height: var(--cover-poster-height);
    z-index: 9;
  }
  .portfolio-projects img {
    height: var(--cover-poster-height);
    width: 100%;
    top: 0;
    left: 0;
    transform: inherit;
  }
  .portfolio-projects img.active {
    transform: none;
  }
}

Next, we will create a javascript function that triggers the hover and apply the animation, and toggle the class on mouseover.

Feel free to customize the demo according to your need.