I am trying to add and change a gradient background on the after pseudo element of my section according to the position of the mouse. Im am using WordPress and the divi theme / builder. I have managed to get it to work on a normal section. But I want to use a background image with a gradient overlay that changes according to the mouse position.

The CSS:

#gradient.et_pb_section_0:after {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

The jQuery:

jQuery(document).ready(function() {
  jQuery("#gradient").mousemove( function (event) {
    var w = jQuery(this).width(),
    pct = 360*(+event.pageX)/w,
    bg = "linear-gradient(" + pct + "deg,#2ecc71,#2980b9)";
  jQuery("#gradient.et_pb_section_0:after").css("background-image", bg);
  });
});

According to the code it has to add the background-image attribuut to the #gradient.et_pb_section_0:after class but it does not do anything. What is going wrong here and how can I fix this?

Read more here: Gradient image overlay with mousemovement changes


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: