Question

我正在为我的投资组合创建一个网站，其中涉及一些div缩放。虽然我很容易掌握这部分内容，但是如果没有按比例缩小其他元素，我就会遇到麻烦。它是http://queendiscography.000webhostapp.com的实时版本。如果它睡了，我会留下一些印刷品和代码。提前谢谢大家！

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.

＆＃13;

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;
}

＆＃13;

<!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>

＆＃13;

我如何制作一个可侧接扩展的div，而不会弄乱其他元素？

0 个答案: