image over image effect options

Hey hostworks,
Thanks for your question, the elements that you have linked to are using css for the mouse-over effect.
The box shadow around the element uses this css:

.apx-card:hover .apx-card-inner {
    -webkit-box-shadow: 0 15px 34px #a9afac;
    box-shadow: 0 15px 34px #a9afac;
}

the background color of the icon uses this css:

.apx-card:hover .apx-card-img-inner {
    background: #5ba07c;
    color: #fff;
}

and the lines of the icon uses the invert filter

.apx-card:hover img {
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}

If you wanted to recreate this with the Icon Box element, you could add the custom class apx-card to it:

then add this css:

.apx-card:hover .iconbox_icon {
    background-color: #fff;
    color: #000;
}
.apx-card:hover {
    -webkit-box-shadow: 0 15px 34px #a9afac;
    box-shadow: 0 15px 34px #a9afac;
}

for this result on mouse-over (the middle element)

please give this a try and if you need further help please link to a test page that we can examine.

Best regards,
Mike

Hi,
Thanks for the link to your images, I misunderstood your approach. For this, I would recommend using two image elements to Swap Images on Hover With Closest Hidden Image
Let’s start with an image element and add the custom class beforeHover:

then we will add another image element next to it with the custom class afterHover and assign the Element Visibility to hidden for all devices:

so the example page will look like this:

then add this code to the end of your functions.php file in Appearance ▸ Editor:

function custom_swap_image_on_hover_with_closest_hidden_image_script() { ?>
    <script>
window.addEventListener('DOMContentLoaded', function() {
(function($){
  $('.avia-image-container.beforeHover').hover(function(e){
      $(this).find('img').attr('data-url', $(this).find('img').attr('src'));
      $(this).find('img').attr('src', $(this).next('.afterHover').find('img').attr('src'));
	  $(this).find('img').attr('srcset', $(this).next('.afterHover').find('img').attr('src'));
  },
  function(e){
      $(this).find('img').attr('src', $(this).find('img').attr('data-url'));
	  $(this).find('img').attr('srcset', $(this).find('img').attr('data-url'));
  }); 
})(jQuery);
});
    </script>
    <?php
  }
  add_action('wp_footer', 'custom_swap_image_on_hover_with_closest_hidden_image_script');

please give this a try and if you need further help please link to a test page that we can examine.

Best regards,
Mike