Hover one image to change the opacity on another image

Hello! As the title says, I need to change the opacity from one image with is 0 to 1 which has class “imgBox01” when I hover an image with class “imgBox1”

This is an automated message to notify you that your thread was posted in the wrong forum, and it has been moved to the correct place. A member of our team will be happy to reply just as soon as your thread is up. How support works.

For support, please post all questions in the Support Forum.

For peer to peer conversations with other Themeco customers about tips, customizations, or suggestions you are welcome to use the Peer to Peer (no official support provided here).

For Design & Development, Marketing & Media, and Hosting & Optimization discussions you are welcome to use the General Forum to discuss with fellow Apex members about non Themeco related topics. Please keep this in mind in the future.

Thank-you!

Hi there,

This is a customization and outside of our support scope and we can not implement the code for you, but we can give you suggestions regarding this.

There are both CSS and Javascript involved to achieve such an effect.

You need to set the default opacity of the destination image to 0. And add a CSS code to animate the opacity later:

. imgBox1 {
  opacity: 0;
  -webkit-transition: 600ms all ease;
  transition: 600ms all ease;
}

Also you need to add a CSS code when the opacity is 1 with the animation. We can add a class for that such as showed so the code will be:

. imgBox1.showed {
  opacity: 1;
  -webkit-transition: 600ms all ease;
  transition: 600ms all ease;
}

Now in the Javascript code you will simply say that add the showed class when you hover to the source image:

jQuery('.imgBox1').on('mouseenter', function() {
   jQuery('.imgBox01').addClass('showed');
});

Hope it helps.

Thanks for the reply! It doesnt seem to be working. http://imayen.com/ All I need for it to do is where it says “Lo que hacemos” when I hover the first image, the second image should show up

Hi,

Sorry, there was a typo in the css code.

There shouldn’t be a space after the dot.

Kindly change the css code to this.

 .imgBox1 {
  opacity: 0;
  -webkit-transition: 600ms all ease;
  transition: 600ms all ease;
}

.imgBox1.showed {
  opacity: 1;
  -webkit-transition: 600ms all ease;
  transition: 600ms all ease;
}

Hope that helps