Home › Forums › Pro Support › Add custom hover over effect with CSS to post images
Tagged: custom hover over effect
- This topic has 6 replies, 2 voices, and was last updated 2 years, 12 months ago by
elvin.
-
AuthorPosts
-
September 28, 2020 at 10:51 am #20233
VISHNUDAS
ParticipantTwo questions in one…
1. I want the images of the post show some animation when I hover over them. The zoom, blur and greyscale effects come readymade with the plugin.
How can I add more image hover over effects if I like?
I tried using css for the .wp-show-posts-image class. I added the border-radius of 10 and it worked fine. But when I try to add the css animation, it doesn’t work.
The following is the code that I tried to use for the class.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; }
2. 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?
September 28, 2020 at 12:42 pm #20248VISHNUDAS
ParticipantMy 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?September 28, 2020 at 2:04 pm #20265elvin
ModeratorHi Vishnu,
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?
You can manipulate the HTML structure and its attributes by using PHP filters.
Here’s one example – https://wpshowposts.com/support/topic/categories-inside-the-featured-images/#post-19608
If you’d notice, there are HTML elements within the code. These are written in literal strings that we can change/add to.
You just need to know what hooks to use.
For now, you can ask us for it as the documentation for the hooks list used by WPSP is still under construction. You can also browse through the plugin files for clues if you can understand them.
September 29, 2020 at 5:37 am #20308VISHNUDAS
ParticipantIn 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.September 29, 2020 at 2:53 pm #20344elvin
ModeratorAll 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.
Correct, but we can change how these are generated through WPSP PHP filters.
I understand what you mean. It does seem tedious.
JavaScript route should work too but looking at your code, it probably returns
Uncaught TypeError: Cannot read property 'add' of undefined
on the console when you inspect the site as thevar element
doesn’t seem properly defined.That said, you may have to create a for loop as
wp-show-posts-image
class is used on multiple elements.Example:
var element = document.getElementsByClassName('wp-show-posts-image'); for(i=0; i<element.length; i++){ element[i].classList.add("hvr-grow"); }
October 2, 2020 at 2:00 am #20548VISHNUDAS
ParticipantDear 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!October 4, 2020 at 2:17 pm #20663elvin
ModeratorNice one. No problem. 🙂
We all start somewhere. Keep learning and I’m sure you’ll be great at it.
If you have any other questions, feel free to open up a new topic.
-
AuthorPosts
- You must be logged in to reply to this topic.