CODEWITHSUNDEEP
jqueryhtmlcss
Luca Belletti
Luca Belletti

Reputation: 103

Background transition adding class

I'm looking for a way to change the background of a row based on adding a class.

I leave you an example at the point where I am developing:

https://www.ai6.it/#rowContattaci

When you go above the div class #rowContattaciby passing the image, add a class .hover to #rowContattaci , but I can not add the transition in the background and it works snap.

What I wonder, is the right way to add a background effect or is it right but I'm doing something wrong?

jQuery( ".customImageContattaci" ).hover(
  function() {
    jQuery('#rowContattaci').addClass( "hover" );
  }, function() {
    jQuery('#rowContattaci').removeClass( "hover" );
  }
);
#rowContattaci {
  background: white;
       padding-left: 0px !important;
    padding-right: 30% !important;
    transition: 1s;
    margin-left: 0% !important;
    left: 0px !important;
}
#rowContattaci.hover {
  background: url('https://www.ai6.it/wp-content/uploads/2018/08/contatti.jpg');
  transition: 2s !important;
}
#rowContattaci.hover .customImageContattaci {
  opacity: 0;
 transition: 2s !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowContattaci" data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid eightRow sectionContattaci rowHome section" style="position: relative; left: -231.094px; box-sizing: border-box; width: 1920px; padding-left: 231.094px; padding-right: 242.906px;"><div class="wpb_column vc_column_container vc_col-sm-6"></div><div class="wpb_column vc_column_container vc_col-sm-6"><div class="vc_column-inner "><div class="wpb_wrapper"><div class="wpb_single_image wpb_content_element vc_align_center   customImageContattaci"><figure class="wpb_wrapper vc_figure"><div class="vc_single_image-wrapper   vc_box_border_grey"><img width="745" height="891" src="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti.jpg 745w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-251x300.jpg 251w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-122x146.jpg 122w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-42x50.jpg 42w, https://www.ai6.it/wp-content/uploads/2018/07/home-page-contatti-63x75.jpg 63w" sizes="(max-width: 745px) 100vw, 745px"></div></figure></div></div></div></div></div>

Upvotes: 0

Views: 78

Answers (1)

Temani Afif
Temani Afif

Reputation: 272648

You can consider the background as a pseudo element. Here is an example where I used the hover effect that you can easily replace with a class:

body {
  margin: 0;
  position: relative;
  height: 100vh;
  background: pink;
  z-index: 0;
}

body:before {
  content: "";
  position: absolute;
  z-index: -1;
  background: url(https://picsum.photos/800/600?image=1069);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  transition: 1s;
}

body:hover::before {
  opacity: 1;
}

Upvotes: 1

Related Questions