info overlay poster on click

by marcuslv

HTML

<div class="container">

  <div class="posterWrapper">
    <img class="posterImg" src="https://www.fillmurray.com/300/300">
  </div>

  <div class="movieCard">

    <div id="Title">Harry Potter, 2000</div>

    <div id="Genre">Fantasy, Adventure</div>

    <div id="Plot">A young wizard discovers a world of adventure.</div>

    <div id="Rated">PG</div>

    <div id="imdbRating">7.1</div>

    <div id="imdbVotes">9090</div>

    <div id="Runtime">127 mins</div>
  </div>
</div>

CSS

* {
  font-family: Arial;
  font-size: 14px;
}

.container {
  min-width: 200px;
  max-width: 400px;
  height: 300px;

  position: relative;
  margin: auto;

  border: 2px solid red;
  background-color: #242424;
  
  cursor: pointer;
}


.posterWrapper {
  display: flex;
  justify-content: center;
  
  width: 100%;
  height: 100%;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.posterImg {
  opacity: 1;
  transition: opacity 0.1s;
}

.posterImgActive {
    opacity: 0.1;
    transition: opacity 0.1s;
}

.movieCard {
  display: flex;
  flex-direction: column;
  row-gap: 5px;
  
  margin: 1rem;
  padding: 1rem;

  color: white;
  background: rgba(204, 204, 204, 0.2);
  
  opacity: 0;
  transition: opacity 0.1s;
}

.movieCardActive {
  color: #e8e6e6;
  background: rgba(204, 204, 204, 0.2);
  opacity: 1;
  
  transition: opacity 0.05s;
}

JavaScript

var x = document.getElementsByClassName("container")[0];
var y = document.getElementsByClassName("movieCard")[0];
var z = document.getElementsByClassName("posterImg")[0];

function toggleClass(element, className){
	if (element.classList.contains(className)) {
  	element.classList.remove(className);
  } else {
  	element.classList.add(className);
  }
}

x.addEventListener('click', () => {
	toggleClass(y, "movieCardActive");
  toggleClass(z, "posterImgActive");
})