title: Partly Transparent Image Carousel
body: <p>Right now I'm trying to make a Pokedex type thing for a project I'm working on. It works as intended except for now feature that I'd like to add. I want it so that it doesn't show the whole carousel throughout the page. I want it so that you have the main middle element, one 50% transparent element above, two 50% transparent elements below, and have the rest disappeared out. I was trying to get it to work myself, but the best I could accomplish was disappearing everything except the main middle element. Help would be greatly appreciated here.</p>
  <p><strong>CSS</strong></p>
  <pre class="lang-css prettyprint-override"><code>* { box-sizing: border-box; }
  
  body {
      margin: 0;
      padding: 0;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-image: url(&quot;../.img/pokedex/pokedex.png&quot;);
      background-repeat: no-repeat;
      background-position: 50%;
      background-size: 775px;
  }
  
  a, a:visited, a:active {
      color: inherit;
  }
  
  .sprite {
      display: block;
      margin-right: 310px;
      position: absolute;
  }
  
  .pkmname {
      display: block;
      margin-left: 225px;
      position: absolute;
  }
  
  .carousel {
      display: flex;
      align-items: center;
      position: relative;
      padding: 130px 0;
      margin-left: 340px;
      margin-top: 248px;
  }
  
  .carousel__scene {
      position: relative;
      width: 510px;
      height: 460px;
      max-width: 95vw;
      padding-top: 60px;
      perspective: 100px;
      /*overflow: hidden;*/
  }
  
  .carousel__controls {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 10px;
      position: absolute;
      right: 15px;
      margin-bottom: 190px;
      margin-right: 20px;
  }
  
  .previous-button, .next-button {
      margin: 5px 0;
      width: 50px;
      height: 50px;
      font-family: monospace;
      font-weight: bold;
      font-size: 2rem;
      border: 3px solid goldenrod;
      border-radius: 10px;
      background-color: #444;
  }
  
  .previous-button:focus, .next-button:focus {
      outline: none;
      box-shadow: 0 0 6px 3px goldenrod;
  }
  
  #prev, #next {
      margin-right: 50px;
  }
  
  .carousel__list {
      width: 100%;
      height: 150px;
      margin: 0;
      padding: 0;
      position: absolute;
      transform: translateZ(-288px);
      transform-style: preserve-3d;
      transition: transform 1s;
      list-style: none;
      counter-reset: list-counter;
  }
  
  .carousel__cell {
      position: absolute;
      width: 400px;
      height: 140px;
      max-width: calc(95vw - 20px);
      left: 10px;
      top: 10px;
      font-size: 20px;
      font-weight: bold;
      color: white;
      text-align: center;
      transition: transform 1s, opacity 1s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      counter-increment: list-counter;
      background-image: url(&quot;../.img/pokedex/unknown.png&quot;);
      background-repeat: no-repeat;
      background-position: center;
  }
  
  .carousel__cell:not(.selected) {
      opacity: 50%;
  }
      
      
  
  .carousel__cell:before {
      content: counter(list-counter);
      color: white;
      text-shadow: 2px 2px black;
      width: 40px;
      height: 40px;
      line-height: 40px;
  }
  
  .carousel__cell.selected {
      color: goldenrod;
      border-color: goldenrod;
      border-width: 5px;
      /*filter: none;*/
  }
  
  .carousel__cell.before {
      opacity: 100%;
  }
  
  .carousel__cell.after {
      opacity: 50%;
  }
  
  .carousel__cell.hide {
      opacity: 0%;
  }
  
  .carousel__cell.selected::before {
      color: goldenrod;
  }
  
  .carousel__cell:nth-child(0) { transform: rotateX(0deg) translateZ(288px); }
  .carousel__cell:nth-child(1) { transform: rotateX(40deg) translateZ(288px); }
  .carousel__cell:nth-child(2) { transform: rotateX(80deg) translateZ(288px); }
  .carousel__cell:nth-child(3) { transform: rotateX(120deg) translateZ(288px); }
  .carousel__cell:nth-child(4) { transform: rotateX(160deg) translateZ(288px); }
  .carousel__cell:nth-child(5) { transform: rotateX(200deg) translateZ(288px); }
  .carousel__cell:nth-child(6) { transform: rotateX(240deg) translateZ(288px); }
  .carousel__cell:nth-child(7) { transform: rotateX(280deg) translateZ(288px); }
  .carousel__cell:nth-child(8) { transform: rotateX(320deg) translateZ(288px); }
  </code></pre>
  <p><strong>HTML</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;carousel&quot;&gt;
              &lt;div class=&quot;carousel__scene&quot;&gt;
                  &lt;ol class=&quot;carousel__list&quot;&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0001-bulbasaur.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_001.png&quot; alt=&quot;Bulbasaur&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Bulbasaur&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0002-ivysaur.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_002.png&quot; alt=&quot;Ivysaur&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Ivysaur&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0003-venusaur.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_003.png&quot; alt=&quot;Venusaur&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Venusaur&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0004-charmander.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_004.png&quot; alt=&quot;Charmander&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Charmander&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0005-charmeleon.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_005.png&quot; alt=&quot;Charmeleon&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Charmeleon&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0006-charizard.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_006.png&quot; alt=&quot;Charizard&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Charizard&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0007-squirtle.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_007.png&quot; alt=&quot;Squirtle&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Squirtle&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0008-wartorle.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_008.png&quot; alt=&quot;Wartortle&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Wartortle&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0009-blastoise.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_009.png&quot; alt=&quot;Blastoise&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Blastoise&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0010-caterpie.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_010.png&quot; alt=&quot;Caterpie&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Caterpie&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0011-metapod.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_011.png&quot; alt=&quot;Metapod&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Metapod&lt;/span&gt;&lt;/li&gt;
                      &lt;li class=&quot;carousel__cell&quot; onClick=&quot;location.href='../../dexentries/0012-butterfree.html'&quot;&gt;&lt;img class=&quot;sprite&quot; src=&quot;../../../.img/game-sprites/gen1/spr_rb-gb_012.png&quot; alt=&quot;Butterfree&quot;/&gt;&lt;span class=&quot;pkmname&quot;&gt;Butterfree&lt;/span&gt;&lt;/li&gt;
                  &lt;/ol&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel__controls&quot;&gt;
                  &lt;button class=&quot;previous-button&quot; style=&quot;background: url('../../../.img/pokedex/prev.png'); background-repeat: no-repeat; background-position: center;&quot; onClick=&quot;plusSlides(-1)&quot;&gt;&lt;/button&gt;
                  &lt;button class=&quot;next-button&quot; style=&quot;background: url('../../../.img/pokedex/next.png'); background-repeat: no-repeat; background-position: center;&quot; onClick=&quot;plusSlides(1)&quot;&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;script type=&quot;text/javascript&quot; src=&quot;../../../.js/pokedex.js&quot;&gt;&lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  <pre><code>// JavaScript Document
  
  const carousel = document.querySelector('.carousel__list');
  const cells = carousel.querySelectorAll('.carousel__cell');
  
  const cellWidth = carousel.offsetWidth;
  const cellHeight = carousel.offsetHeight;
  const cellSize = cellHeight;
  const cellCount = 151;
  
  const radius = Math.round((cellSize / 2) / Math.tan(Math.PI / cellCount));
  const theta = 360 / cellCount;
  
  var selectedIndex = 0;
  
  function rotateCarousel() {
      const angle = theta * selectedIndex * -1;
      carousel.style.transform = 'translateZ(' + -radius + 'px) ' + 'rotateX(' + -angle + 'deg)';
      
      const cellIndex = selectedIndex &lt; 0 ? (cellCount - ((selectedIndex * -1) % cellCount)) : (selectedIndex % cellCount);
      
      const cells = document.querySelectorAll('.carousel__cell');
      cells.forEach((cell, index) =&gt; {
          if(cellIndex === index) {
              if(!cell.classList.contains('selected'))
                  cell.classList.add('selected');
          }
          else {
              if(cell.classList.contains('selected')) {
                  cell.classList.remove('selected');
              }
          }
      });
  }
  
  function selectPrev() {
      selectedIndex--;
      rotateCarousel();    
  }
  
  function selectNext() {
      selectedIndex++;
      rotateCarousel();    
  }
  
  var prevButton = document.querySelector('.previous-button');
  prevButton.addEventListener('click', selectPrev);
  
  var nextButton = document.querySelector('.next-button');
  nextButton.addEventListener('click', selectNext);
  
  function initCarousel() {    
      for(let i = 0; i &lt; cells.length; i++) {
          const cell = cells[i];
          const cellAngle = theta * i;
          cell.style.transform = 'rotateX(' + -cellAngle + 'deg) translateZ(' + radius + 'px)';
      }
      rotateCarousel();
  }
  
  initCarousel();
  </code></pre>