How to make current :hover element be on top when all elements are using the same class-CodePudding

I am trying to create a simple bookshelf using pure CSS and HTML. However, I am struggling to get the currently moused-over book to have the highest z-index.

Is this possible without JS? Some clever use of CSS selectors perhaps?

JSFiddle

HTML

<div >
  <div >
    <div >
      1
    </div>
    <div >
    </div>
    <div >
      Book 1
    </div>
  </div>
  <div >
    <div >
      2
    </div>
    <div >
    </div>
    <div >
      Book 2
    </div>
  </div>
  <div >
    <div >
      3
    </div>
    <div >
    </div>
    <div >
      Book 3
    </div>
  </div>
</div>

CSS

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
}

CodePudding user response：

Just add z-index at .book:hover.

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
  z-index: 1;
}

<div >
  <div >
    <div >
      1
    </div>
    <div >
    </div>
    <div >
      Book 1
    </div>
  </div>
  <div >
    <div >
      2
    </div>
    <div >
    </div>
    <div >
      Book 2
    </div>
  </div>
  <div >
    <div >
      3
    </div>
    <div >
    </div>
    <div >
      Book 3
    </div>
  </div>
</div>

CodePudding user response：

You can do something like this maybe?? Let me know

.bookshelf {
  width: 100%;
  /* height: 800px; */
  margin-top: 32px;
  border: 1px solid #CCC;
  display: flex;
}

.book {
  width: 50px;
  height: 280px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateY(0);
  transition: transform 1s;
}

.side {
  position: absolute;
  border: 2px solid black;
  font-weight: bold;
  color: black;
  text-align: center;
  transform-origin: center left;
}

.spine {
  width: 50px;
  height: 280px;
  line-height: 200px;
  background-color: yellow;
  transform: rotateY(0deg) translateZ(0px);
}

.top {
  width: 50px;
  height: 190px;
  line-height: 200px;
  background-color: green;
  transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
  width: 190px;
  height: 280px;
  line-height: 200px;
  background-color: cyan;
  left: 50px;
  transform: rotateY(90deg) translateZ(0);
  transition: transform 1s;
}

.book:hover {
  transform: rotateX(0deg) rotateY(-100deg) rotateZ(-360deg) translateY(0px) translateX(5px);
  z-index:2;
}

<div >
  <div >
    <div >
      1
    </div>
    <div >
    </div>
    <div >
      Book 1
    </div>
  </div>
  <div >
    <div >
      2
    </div>
    <div >
    </div>
    <div >
      Book 2
    </div>
  </div>
  <div >
    <div >
      3
    </div>
    <div >
    </div>
    <div >
      Book 3
    </div>
  </div>
</div>