How can I produce this hover effect onto my carousel?

user_14336482 0
Viewed 313

Basically, I have made a 3D Carousel that has 3 images in it. When the user clicks the "Next" and "Previous" buttons, the carousel moves back and forth. I also have a separate image at the top that produces this hover effect. I would like to include that hover effect onto the images in my carousel, with the same animation, opacity, text, size ect. However, I do not know how to include it. How can I do this? Any help would be appreciated. Here is my code. Thanks.

var carousel = $(".carousel"),
    currdeg  = 0;

$(".next").on("click", { d: "n" }, rotate);
$(".prev").on("click", { d: "p" }, rotate);

function rotate(e){
  if(e.data.d=="n"){
    currdeg = currdeg - 120;
  }
  if(e.data.d=="p"){
    currdeg = currdeg + 120;
  }
  carousel.css({
    "-webkit-transform": "rotateY("+currdeg+"deg)",
    "-moz-transform": "rotateY("+currdeg+"deg)",
    "-o-transform": "rotateY("+currdeg+"deg)",
    "transform": "rotateY("+currdeg+"deg)"
  });
}
.container {
  margin: 0 auto;
  width: 250px;
  height: 200px;
  position: relative;
  top: 500px;
  perspective: 1000px;
  
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  opacity: 0.95;
  
}

.a {
  transform: rotateY(0deg) translateZ(250px);
}
.b {
  transform: rotateY(120deg) translateZ(250px);
}
.c {
  transform: rotateY(240deg) translateZ(250px);
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 500px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 504px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }



.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}
.container .title{
 color: #1a1a1a;
 text-align: center;
 margin-bottom: 10px;
}
 

 
.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}
 
.content:hover .content-overlay{
 opacity: 1;
}
 
.content-image{
 width: 100%;
}
 
.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 
.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}
 
.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}
 
.content-details p{
 color: #fff;
 font-size: 0.8em;
}
 
.fadeIn-bottom{
 top: 80%;
}




.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}


 
.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}
 
.content:hover .content-overlay{
 opacity: 1;
}
 
.content-image{
 width: 100%;
}
 
.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 
.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}
 
.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}
 
.content-details p{
 color: #fff;
 font-size: 0.8em;
}
 
.fadeIn-bottom{
 top: 80%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<body>
   <div class="content">
   <a href="#open-modal">
     <div class="content-overlay"></div>
     <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg">
     <div class="content-details fadeIn-bottom">
       <h3 class="content-title">Eiffel Tower</h3>
     </div>
   </a>
 </div>
  <div class="container">
  <div class="carousel">
    <div class="item a"><img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px"></div>
    <div class="item b"><img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px"></div>
    <div class="item c"><img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px"></div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

  <script src="script.js"></script>
</body>
</html>

css html jquery javascript
1 Answers

For the solution, I had to make some changes to the css, html and fix your js code to determine the active slide.

Was such a result necessary?

var carousel = $(".carousel"),
    currdeg = 0,
    current = 0;

$(".next").on("click", {d: "n"}, rotate);
$(".prev").on("click", {d: "p"}, rotate);

function rotate(e) {

    $(carousel.find('.active')).removeClass('active');
    if (e.data.d == "n") {
        currdeg = currdeg - 120;  
        current = (current + 1) % carousel.find('.item').length;
    }
    
    if (e.data.d == "p") {
        currdeg = currdeg + 120;
        current = (current - 1 + carousel.find('.item').length) % carousel.find('.item').length;

    }
    
    $(carousel.find('.item')[current]).addClass('active');
    carousel.css({
      "-webkit-transform": "rotateY(" + currdeg + "deg)",
      "-moz-transform": "rotateY(" + currdeg + "deg)",
      "-o-transform": "rotateY(" + currdeg + "deg)",
      "transform": "rotateY(" + currdeg + "deg)"
    }); 
}
.container {
  margin: -100px auto;
  width: 250px;
  height: 200px;
  position: relative;
  top: 500px;
  perspective: 1000px;
  
}

.carousel {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.item {
  display: block;
  position: absolute;
  background: #000;
  width: 250px;
  height: 200px;
  line-height: 200px;
  font-size: 5em;
  text-align: center;
  color: #FFF;
  /*opacity: 0.95;*/
  
}

.item.active {
  cursor: pointer;
  
}

.a {
  transform: rotateY(0deg) translateZ(250px);
}
.b {
  transform: rotateY(120deg) translateZ(250px);
}
.c {
  transform: rotateY(240deg) translateZ(250px);
}

.next, .prev {
  color: #444;
  position: absolute;
  top: 500px;
  padding: 1em 2em;
  cursor: pointer;
  background: #CCC;
  border-radius: 5px;
  border-top: 1px solid #FFF;
  box-shadow: 0 5px 0 #999;
  transition: box-shadow 0.1s, top 0.1s;
}
.next:hover, .prev:hover { color: #000; }
.next:active, .prev:active {
  top: 504px;
  box-shadow: 0 1px 0 #999;
}
.next { right: 5em; }
.prev { left: 5em; }



.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}
.container .title{
 color: #1a1a1a;
 text-align: center;
 margin-bottom: 10px;
}
 

.carousel .content-overlay, 
.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 100%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
 opacity: 1;
}

.carousel .item.active:hover .content-overlay{
 opacity: 1;
}
 
.content-image{
 width: 100%;
}
 
.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 
.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}
 
.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}
 
.content-details p{
 color: #fff;
 font-size: 0.8em;
}
 
.fadeIn-bottom{
 top: 80%;
}




.content {
 position: relative;
 width: 100%;
 margin-left: auto;
 margin-right: auto;
 max-width: 400px;
}


 
.content .content-overlay {
 background: rgba(0,0,0,0.7);
 position: absolute;
 height: 99%;
 width: 100%;
 opacity: 0;
 -webkit-transition: all 0.4s ease-in-out 0s;
 -moz-transition: all 0.4s ease-in-out 0s;
 transition: all 0.4s ease-in-out 0s;
}
 
.content:hover .content-overlay{
 opacity: 1;
}
 
.content-image{
 width: 100%;
}
 
.content-details {
 position: absolute;
 text-align: center;
 padding-left: 1em;
 padding-right: 1em;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 
.content:hover .content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}
 
.content-details h3{
 color: #fff;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
}
 
.content-details p{
 color: #fff;
 font-size: 0.8em;
}
 
.fadeIn-bottom{
 top: 80%;
}

.carousel_content-details {
 position: absolute;
 text-align: center;
 width: 100%;
 top: 50%;
 left: 50%;
 opacity: 0;
  margin: 0;
 padding: 0;
 -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 transform: translate(-50%, -50%);
 -webkit-transition: all 0.3s ease-in-out 0s;
 -moz-transition: all 0.3s ease-in-out 0s;
 transition: all 0.3s ease-in-out 0s;
}
 
.carousel .item.active:hover .carousel_content-details{
 top: 50%;
 left: 50%;
 opacity: 1;
}
 
.carousel_content-details h3{
 color: #fff;
 font-size: 24px;
 font-weight: 500;
 letter-spacing: 0.15em;
 margin-bottom: 0.5em;
 text-transform: uppercase;
 margin: 0;
 padding: 0;
}
 
.carousel_fadeIn-bottom{
  top: 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css">
  <title>Document</title>
</head>
<body>
   <div class="content">
   <a href="#open-modal">
     <div class="content-overlay"></div>
     <img class="content-image" src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg">
     <div class="content-details fadeIn-bottom">
       <h3 class="content-title">Eiffel Tower</h3>
     </div>
   </a>
 </div>
  <div class="container">
  <div class="carousel">
    <div class="item a active">
    <div class="content-overlay"></div>
    <img src="https://www.insidehook.com/wp-content/uploads/2019/08/HERO-3.jpg?fit=1200%2C750" width="250px" height="200px">
     <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 1</h3>
     </div>
    </div>
    <div class="item b">
    <div class="content-overlay"></div>
    <img src="https://static.independent.co.uk/s3fs-public/thumbnails/image/2014/03/25/12/eiffel.jpg" width="250px" height="200px">
    <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 2</h3>
     </div>
    </div>
    <div class="item c">
    <div class="content-overlay"></div>
    <img src="https://nypost.com/wp-content/uploads/sites/2/2019/12/robberies-serious-crimes-spike-in-central-park-this-year.jpg?quality=80&strip=all" width="250px" height="200px">
     <div class="carousel_content-details carousel_fadeIn-bottom">
       <h3 class="carousel_content-title">Text 3</h3>
     </div>
    </div>
  </div>
</div>
<div class="next">Next</div>
<div class="prev">Prev</div>

  <script src="script.js"></script>
</body>
</html>

user_135734440
Related