Trigger class on image when div is hovered over (WordPress)

0 Views

I currently am getting all these posts in a loop, and displaying them, using this code: 

     <div class="row" style="margin-bottom:50px;">
                        <!-- First, the loop checks whether any posts were discovered with the have_posts() function. -->
                        <?php if (have_posts()) : ?>
                        <!-- First, the loop checks whether any posts were discovered with the have_posts() function. -->
                        <!-- If there were any posts, a PHP while loop is started. A while loop will continue to execute as long as the condition in the parenthesis is logically true. So, as long as the function have_posts() returns a true value, the while loop will keep looping (repeating). -->
                        <?php while (have_posts()) : the_post(); ?>
                        <a href="<?php echo get_permalink(); ?>">
                         <?php echo "<div class='col-md-6 col-sm-6 col-xs-12' style='margin-bottom:30px;'>"; ?>
                         <div class="row mobilemargin">
                              <div class="categorytiletext">
                                    <div class="col-md-6 col-sm-12 col-xs-12 nopr"><?php echo get_the_post_thumbnail( $page->ID, 'categoryimage', array('class' => 'newimgheight hovereffect')); ?> </div>
                                    <div class="col-md-6 col-sm-12 col-xs-12 mobilewhite">
                                          <div class="testdiv">
                                               <h5 class="captext"><?php the_title(); ?></h5>
                                               <?php $trimexcerpt = get_the_excerpt();

                                               $shortexcerpt = wp_trim_words( $trimexcerpt, $num_words = 10, $more = '… ' ); 

                                               echo '<a href="' . get_permalink() . '"><p>' . $shortexcerpt . '</p></a>'; 

                                               ?>
                                         </div>
                                   </div>
                             </div>
                       </div>
                       <?php echo "</div>"; ?>

                 </a>
                 <!-- If there is no posts, display an error message -->
           <?php endwhile; else: ?>
           <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     <?php endif; ?>
     <!-- If there is no posts, display an error message -->
</div>

Now, I have a class, which is named hovereffect on my image, this makes the opacity change. As you can see, the image is in the 6 column, and the text is in the 6 column. Is there a way, which I can make the image opacity change when the text is hovered over?

Post Views: 0

Related posts

1 comment

  1. You can use the jQuery hover() method, like this:

    $('p').hover(function() {
  $('.hovereffect').css('opacity', '0.5');
});

    Instead of changing the CSS directly you could also toggle another class or what you prefer.

    Edit: I just read that you use the hovereffect class to change the opacity. In this case, you shouldn’t add the class in the php, and have this jQuery instead:

    $('p').hover(function() {
  $('.anotherClassOnYourImage').toggleClass('hovereffect');
});

    Instead of using ‘p’ as a selector you should add a class to it.

Comments are closed.