Support Forum

Please login to receive premium support.

Support for the free plugin can be found here.

Home Forums Pro Support Add custom hover over effect with CSS to post images Reply To: Add custom hover over effect with CSS to post images


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

   position: relative;
.wp-show-posts-image > a > img.wp-post-image {
   width: 100%;
.wp-show-posts-image > span.cat_links { 
   position: absolute; 
   bottom: 7.5%; 
   left: 5%;
.wp-show-posts-image > span.cat_links > span > ul{

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.

 var element = document.getElementsByClassName('wp-show-posts-image');

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.