[Resolved] Add custom hover over effect with CSS to post images

My bad…
I forgot to add the complete CSS code… the complete code goes like the following

.wp-show-posts-image{
  border-radius:10px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.wp-show-posts-image:hover, .wp-show-posts-image:focus, .wp-show-posts-image:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

It is working now…
but the second part of the question remains unresolved…
The second question: Is there any way to directly add CSS class (I have inserted hover.css code in my child theme css file, it has many classes to bring about cool animation effects…) to the elements like image, title etc in the post list generated by the plugin? If yes, how to achieve that?

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.

Dear Elvin,
Thanks a lot for the help. It worked.
Amateurs like me see this as an Aaahaa moment. I wish I could take a complete grip on GeneratePress, GenerateBlocks, WP show posts and so on. I am learning… wish me luck!
Thanks a lot again!