Support Forum

In the example you have mentioned, there is a CSS code you have asked to use for styling the html elements (as follows)

.wp-show-posts-image{
   position: relative;
}
.wp-show-posts-image > a > img.wp-post-image {
   width: 100%;
}
.wp-show-posts-image > span.cat_links { 
   position: absolute; 
   margin:0; 
   top:auto; 
   bottom: 7.5%; 
   left: 5%;
}
.wp-show-posts-image > span.cat_links > span > ul{
   list-style:none;
   margin:0;
   padding:5px;
}

All these are the classes assigned by-default by the plugin to the different html elements being generated. e.g. wp-show-posts-image is the CSS class assigned to a div.
In the current scenerio, if I want some CSS to be applied to that div with the class “wp-show-posts-image”, I have to add my CSS code withing the class “wp-show-posts-image” using e.g. simple CSS or in the CSS of the child theme. If I already have some readymade CSS classes (e.g. Hover.css) to apply some CSS animation, doing all these “copy-paste business” renders my ready to use CSS classes (of Hover.css) useless, because I have to copy and paste the code out of them. Isn’t there some way to directly add the CSS classes, I already have, to the html elements generated by the WPSP pro plugin? I have tried to use the javascript (selecting the CSS elements using the function getElementsByClassName() function and then applying my own CSS classes by using classList.add() function) in the GeneratePress wp_footer hook. But that is not working. e.g. following is the code I have used in the wp_footer hook of GP.

<script>
 var element = document.getElementsByClassName('wp-show-posts-image');
 element.classList.add("hvr-grow");
</script>

I have tried wrapping it within the php as well, but still it is not working.

I am very new to the coding and hoped I could dodge it by using the plugin like WPSP. But one can’t escape the destiny :(.
If you can write some code for me to use directly, it would help me immensely.