How can I make a clickable div that expands sideways w/o messing up the other elements?

Question

I'm creating a website for my portfolio which involves some div scaling. Although I've got this part easily, i'm having troubles to make it expand on click without scaling down other elements. There's a live version of it on http://queendiscography.000webhostapp.com . If its sleeping, I will leave some printscreens and the codes. Thank you all in advance!

the website in its default form

how it works when one element is hovered over. What I'm trying to do is to create another div, with informations about the album, which appears on click and covers the space relative to the two lines of albums.

body {
  background: #000;
  width: 100%;
}

.discoestudio {
  width: 1080px;
  height: 640px;
  background: transparent;
  margin: 0 auto;
  margin-top: 50px;
  overflow: hidden;
}

.album {
  width: 200px;
  height: 200px;
  transition: 0.5s;
  z-index: 0;
}

.album:hover {
  transform: scale(2.1);
  transform-origin: 0 0;
  z-index: 1;
}

.album2 {
  width: 200px;
  height: 200px;
  transition: 0.5s;
  z-index: 0;
}

.album2:hover {
  transform: scale(2.1);
  transform-origin: right top;
  z-index: 1;
}

.album3 {
  width: 200px;
  height: 200px;
  transition: 0.5s;
  z-index: 0;
}

.album3:hover {
  transform: scale(2.1);
  transform-origin: right bottom;
  transform-style: flat;
  z-index: 1;
}

.album4 {
  width: 200px;
  height: 200px;
  transition: 0.5s;
  z-index: 0;
}

.album4:hover {
  transform: scale(2.1);
  transform-origin: left bottom;
  transform-style: flat;
  z-index: 1;
}

.linha {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 200px;
  width: 100%;
}

.linha2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 200px;
  width: 100%;
  margin-top: 20px;
}

.linha3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 200px;
  width: 100%;
  margin-top: 20px;
}

#queenI {
  background: url(https://i.imgur.com/KU49O2S.jpg) no-repeat;
  background-size: contain;
}

#queenII {
  background: url(https://i.imgur.com/mYirR51.jpg) no-repeat;
  background-size: contain;
}

#sha {
  background: url(https://i.imgur.com/Q72zBuk.jpg) no-repeat;
  background-size: contain;
}

#theopera {
  background: url(https://i.imgur.com/ot58zUZ.jpg) no-repeat;
  background-size: contain;
}

#theraces {
  background: url(https://i.imgur.com/RRBqAcV.jpg) no-repeat;
  background-size: contain;
}

#notw {
  background: url(https://i.imgur.com/Q4basfN.jpg) no-repeat;
  background-size: contain;
}

#jazz {
  background: url(https://i.imgur.com/VdhcaPL.jpg) no-repeat;
  background-size: contain;
}

#thegame {
  background: url(https://i.imgur.com/GACdUCy.jpg) no-repeat;
  background-size: contain;
}

#flash {
  background: url(https://i.imgur.com/PhHgSmw.jpg) no-repeat;
  background-size: contain;
}

#hotspace {
  background: url(https://i.imgur.com/j1HY5FV.jpg) no-repeat;
  background-size: contain;
}

#theworks {
  background: url(https://i.imgur.com/CFROuSj.jpg) no-repeat;
  background-size: contain;
}

#kindof {
  background: url(https://i.imgur.com/pVY63E5.jpg) no-repeat;
  background-size: contain;
}

#miracle {
  background: url(https://i.imgur.com/OiYAK1N.jpg) no-repeat;
  background-size: contain;
}

#innuendo {
  background: url(https://i.imgur.com/84TP2Cc.jpg) no-repeat;
  background-size: contain;
}

#madein {
  background: url(https://i.imgur.com/oyNI3u0.jpg) no-repeat;
  background-size: contain;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="queendisco.css">
</head>

<body>
  <div class="discoestudio">
    <div class="linha">
      <div class="album" id="queenI"></div>
      <div class="album" id="queenII"><br></div>
      <div class="album" id="sha"><br></div>
      <div class="album2" id="theopera"><br></div>
      <div class="album2" id="theraces"><br></div>
    </div>
    <div class="linha2">
      <div class="album" id="notw"><br></div>
      <div class="album" id="jazz"><br></div>
      <div class="album" id="thegame"><br></div>
      <div class="album2" id="flash"><br></div>
      <div class="album2" id="hotspace"><br></div>
    </div>
    <div class="linha3">
      <div class="album4" id="theworks"><br></div>
      <div class="album4" id="kindof"><br></div>
      <div class="album4" id="miracle"><br></div>
      <div class="album3" id="innuendo"><br></div>
      <div class="album3" id="madein"><br></div>
    </div>
  </div>
</body>

</html>

as I said, the hovering is ok, however, I want to create a clickable div which expands over the other, unclicked ones. I tried a lot of potential solutions, but i'm getting nowhere — Vitor Camilo, Jan 18 '18 at 01:45
Check this: https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — Nikhil Eshvar, Jan 18 '18 at 04:47

How can I make a clickable div that expands sideways w/o messing up the other elements?

0 Answers0