Logo on hover with Masonry

Hey JKnoblach,
Thank you for your patience and for the link to your page, it looks like you are using the masonry element and showing portfolio items. We don’t have a default way to add logo images over the masonry item on hover but I was able to find a way to do this for this situation using images, but it may not work with SVG’s because you will need to use image element shortcodes. I imagine you could create custom SVG shortcodes ad use them, but you can’t use html in the excerpts.
For this example we will create an image shortcode using the shortcode wand and paste that shortcode in to the portfolio item manual excerpt field.
Then in the masonry element we will choose to show the excerpt only instead of the title that you are now showing and add this css into the WordPress ▸ Customize ▸ Additional CSS field:

.av-masonry-entry-content .avia-image-container img {
height: 100px;
width: 100px;
}

this css assumes that your logo image is 100px square, feel free to adjust to the size you wish to show.
Then in order to show the shortcode from the excerpt you will need to install the plugin Shortcodes Anywhere or Everywhere and choose the setting In Post/Page Custom Fields

The expected result:

I linked to my example page below, please give this a try.

Best regards,
Mike

Hi,
Thanks for the feedback, what message are you getting when your site crashes? Perhaps it is a conflict with another plugin, have you tried disabling your other plugins? I tested your shortcode on my example page and the SVG’s show correctly but I don’t have other plugins installed, there may be other plugins that you could try.

Best regards,
Mike

Hi,
Please include an admin login, perhaps we can determine the cause.

Best regards,
Mike

Hi,
Thanks for the login, I tested a copy of your page on my site and got the same results, it seems my example page didn’t have the same elements. I have asked the rest of the team for suggestions and will reply back when I hear from them, Thank you for your patience.

Best regards,
Mike

Hi,
Thank you for your patience, I found another way to add the images without a plugin, I replaced the previous shortcodes with these:
[porsche-logo]
[kadewe-logo]
[fcbayern-referenzen-logo]
[fraunhofer-referenzen-logo]
then I added this function to your child theme functions.php

function pure_javascript_image_shortcode() { ?>
    <script>
var elements = new Array();
var elements = document.getElementsByClassName('av-masonry-entry-content');
for (var e = 0; e < elements.length; e++) {
    var newHTML = elements[e].innerHTML;
    newHTML = newHTML.replace('[porsche-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/porsche-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[kadewe-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/kadewe-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[fcbayern-referenzen-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/fcbayern-referenzen-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    newHTML = newHTML.replace('[fraunhofer-referenzen-logo]','<img class="avia_image" src="https://your-site.de/wp-content/uploads/2022/03/fraunhofer-referenzen-logo.svg" alt="" title="" itemprop="thumbnailUrl" style="height: 150px;margin:auto;">');
    elements[e].innerHTML = newHTML;
};
</script>
    <?php
}
add_action('wp_footer', 'pure_javascript_image_shortcode');

now the images show without messing up the other elements, please check.

Best regards,
Mike

Hi,
Glad we were able to help, I removed your domain for the solution above, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike