Black Friday sale! Get 25% off WPSP Pro! Discount automatically applied at checkout.

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

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

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #20233
    vishnu
    Participant

    Two 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?

    #20248
    vishnu
    Participant

    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?

    #20265
    elvin
    Participant

    Hi 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.

    #20308
    vishnu
    Participant

    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.

    #20344
    elvin
    Participant

    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.

    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 the var 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");
    }
    #20548
    vishnu
    Participant

    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!

    #20663
    elvin
    Participant

    Nice 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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.