Невозможно сделать 3D-эффект при наведении

Question

Это оригинальная версия эффекта 3D книги. https://jsfiddle.net/7asrgok4/

Когда я пытаюсь сделать этот 3D-эффект таким, чтобы он отображался при наведении мыши, он работает не со всеми слоями.

.featured-image-container {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}
.featured-image-container img { vertical-align: middle; }

/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d  .bg-book {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container:hover {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent; /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin-right: 50px;
  cursor: pointer;
}

.csstransforms3d  .featured-image-container img {
  position: relative;
  max-width: 100%;
  height:196px;
}

.csstransforms3d  .featured-image-container:before,
.csstransforms3d  .featured-image-container:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d  .featured-image-container:before {
  width: 100%;
  left: 7.5%;
  background-color: #0a0502;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d  .featured-image-container:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
	<div class="featured-image-container">
	  <img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
  </div>
	<div class="featured-image-container">
	  <img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
	</div>
</div>

Answer 1

Проблема в том, что вы должны только добавить стиль :hover, а не заменить его на *. 1002 *

.featured-image-container {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}

.featured-image-container img {
  vertical-align: middle;
}


/*
 *  In order for this to work, you must use Modernizer
 *  to detect 3D transform browser support. This will add
 *  a "csstransforms3d" class to the HTML element.
 *
 *  Visit http://modernizr.com/ for installation instructions
 */

.csstransforms3d .bg-book {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
}

.csstransforms3d .featured-image-container {
  position: relative;
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  box-shadow: none;
  margin-right: 50px;
  cursor: pointer;
}

.csstransforms3d .featured-image-container img {
  position: relative;
  max-width: 100%;
  height: 196px;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-1deg);
  -webkit-transform: perspective(100) rotateY(-1deg);
  outline: 1px solid transparent;
  /* Helps smooth jagged edges in Firefox */
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover img {
  -moz-perspective: 100px;
  -moz-transform: rotateY(-5deg);
  -webkit-transform: perspective(100) rotateY(-5deg);
}

.csstransforms3d .featured-image-container:before,
.csstransforms3d .featured-image-container:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}

.csstransforms3d .featured-image-container:before {
  -moz-perspective: 100px;
  -moz-transform: rotateY(-1deg);
  -webkit-transform: perspective(100) rotateY(-1deg);
  width: 100%;
  left: 2.5%;
  background-color: #0a0502;
  box-shadow: 2px 2px 20px #333;
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover:before {
  -moz-transform: rotateY(-5deg);
  -webkit-transform: perspective(100) rotateY(-5deg);
  left: 7.5%;
  box-shadow: 5px 5px 20px #333;
}

.csstransforms3d .featured-image-container:after {
  width: 1%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
  -webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(0);
  transition: 0.2s;
}

.csstransforms3d .featured-image-container:hover:after {
  width: 5%;
  -moz-transform: rotateY(19deg) translateZ(7px) translateX(3px);
  -webkit-transform: perspective(200) rotateY(8deg) translateZ(7px) translateX(3px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<div class="bg-book">
  <div class="featured-image-container">
    <img src="http://srobbin.com/wp-content/uploads/2012/05/book2.jpg" />
  </div>
  <div class="featured-image-container">
    <img src="http://srobbin.com/wp-content/uploads/2012/05/book3.jpg" />
  </div>
</div>

Answer 2

Используете ли вы событие onmouseover в вашем div? Вы можете заставить его вызывать функцию javascript, которая изменяет класс div. Вот статья W3 о событии onmouseover: https://www.w3schools.com/jsref/event_onmouseover.asp