A Stunning Portfolio Showcase List Item Design

Colelction of portfolio showcase list item design using HTML, CSS and Javascript.

In this tutorial we’ll transform a simple portfolio list items into an extraordinary showcase using the power of HTML, CSS, and JavaScript.

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

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 0.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 0.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 0.5s;
}
/* Project image */
.portfolio-projects img {
  object-fit: cover;
  height: 500px;
  width: 750px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-40%, -50%) scale(0.95);
  visibility: hidden;
  opacity: 0;
  transition: all 0.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;
  }
}

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

let portfolioListItems = document.querySelectorAll("[dd-id]");
let all_images = document.querySelectorAll(".portfolio-projects img");
let portfolio_bg = document.querySelector(".portfolio-projects");
portfolioListItems.forEach((i) => {
  i.addEventListener("mouseover", (e) => {
    let portfolio_bg_clr = e.target.getAttribute("dd-bg");
    portfolio_bg.style.setProperty("--background-clr", portfolio_bg_clr);
    portfolioListItems.forEach((pi) => {
      pi.classList.remove("active");
    });
    e.target.classList.add("active");
    all_images.forEach((img) => {
      img.classList.remove("active");
    });
    let i_id = e.target.getAttribute("dd-id");
    let hovered_img = document.querySelector("#" + i_id);
    hovered_img.classList.add("active");
  });
});

That’s it. Now, combine all together and create awesome hover effect.
Feel free to customize the demo according to your need.