CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paco
Paco

Reputation: 45

Jquery transition with css

I'm relatively new to Jquery and I'm trying to make a mouseover transition so when you hover over the title the background image should be changed with some ease css transition but nothing seems to work. I also tried Jquery fadeIn method but that also doesn't seem to work. What's the correct way to make the transition work? 

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto;
  background-color: #000;
  position: relative;
  overflow-x: hidden;
  transition: all ease 2s;
}

.banner {
  width: 100%;
  height: 100vh;
  transition: all 1s ease;
}

.banner-strip {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: all .5s ease-in-out;
}

.strip {
  position: relative;
  width: 20%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  flex-direction: column;
  /*background-color: #a03131;*/
  color: #fff;
  transition: all 1s ease;
}

.strip p {
  text-align: center;
}

.strip big {
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
}

.strip img {
  line-height: 24px;
  font-size: 14px;
  text-align: center;
  font-style: italic;
  opacity: 0;
  visibility: hidden;
  transition: all ease 2s;
}

.banner-img img {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: all .5s ease-in-out;
}

.banner-img {
  transtition: all .5s ease-in-out;
}

.strip:hover {
  height: 100%;
  padding: 15px 0 90px;
  transition: all 1s ease;
}

.strip:hover img {
  opacity: 1;
  visibility: visible;
  transition: all ease 2s !important;
}
<body>

  <div class="banner">
    <div class="banner-img">
      <img src="default.jpg" alt="">
    </div>

    <div class="banner-strip">
      <div class="strip" data-image="living.jpg">

        <h2>Tattoo</h2><br>

        <a href="tattoo.html">
          <img src="ikonka4.png" alt="" style="width: 60px; height:60px">
        </a>

      </div>
      <div class="strip" data-image="bedroom.jpg">

        <h2>Beauty</h2>

        <a href="beauty.html">
          <img src="ikonka2.png" alt="" style="width: 60px; height:60px">
        </a>

      </div>
      <div class="strip" data-image="dining.jpg">

        <h2>Piercing</h2>
        <a href="piercing.html">
          <img src="ikonka3.png" alt="" style="width: 60px; height:60px">
        </a>


      </div>

    </div>
  </div>




  <!-- jquery cdn link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {

      var image = $(".banner-img").find("img").attr("src");
      $(".banner-img img").css("opacity", "1").fadeIn("slow");

      $(".strip").mouseover(function() {
        var currentImage = $(this).attr("data-image");
        $(this).parent().parent().find(".banner-img img").attr("src", currentImage);
        $(".banner-img img").fadeIn("slow");
      });
      $(".strip").mouseout(function() {
        $(".banner-img img").fadeIn("slow");
        $(".banner-img img").attr("src", image).fadeIn("slow"); // SET DEFAULT IMAGE WHEN MOUSE OUT
      });

    });
  </script>

Upvotes: 1

Views: 102

Answers (1)

j-petty
j-petty

Reputation: 3026

See example below. I've used the background-color property for example purposes but this can easily be substituted with background-image.

$(function() {
  $(".strip").mouseover(function() {
    var curImg = $(this).attr("data-image");
    
    $(".banner-img").css("background-color", curImg);
  });

  $(".strip").mouseout(function() {
    $(".banner-img").css("background-color", '#000');
  });
});
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto;
  position: relative;
  overflow-x: hidden;
}

.banner {
  position: fixed;
  width: 100%;
  height: 100px;
}

.banner-img {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: #000;
  transition: background-color 1s ease-in-out;
}

.banner-strip {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.strip {
  position: relative;
  width: 20%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.strip img {
  display: block;
  width: 60px;
  height: 60px;
  background: #FFF;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.strip:hover img {
  opacity: 1;
}
<div class="banner">
  <div class="banner-img">
    
  </div>

  <div class="banner-strip">
    <div class="strip" data-image="red">
      <a href="tattoo.html">
        <img src="ikonka4.png" alt="">
      </a>
      <h2>Tattoo</h2>
    </div>

    <div class="strip" data-image="blue">
      <a href="beauty.html">
        <img src="ikonka2.png" alt="">
      </a>
      <h2>Beauty</h2>
    </div>

    <div class="strip" data-image="green">
      <a href="piercing.html">
        <img src="ikonka3.png" alt="">
      </a>
      <h2>Piercing</h2>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Related Questions