CSS Hover Over on Thumbnails in Wordpress

CSS hover over on thumbnails in wordpress

<style>
    .postImage{position:relative;}
    .postImage>a{position:absolute; top:0; left:0; z-index:0;}
    .postImage>h1{display:none; position:absolute; top:50%; left:0; z-index:1;}
    .postImage:hover img{opacity:0.5;}
    .postImage:hover h1{display:block;}
</style>

Put both elements (image and h1) in the same div

<div class="postImage">
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('grid-post-image'); ?></a>
    <h1 class="title"><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
</div>

How to add mouseover text to Wordpress featured image thumbnails?

Could You Please try Following code with the css.You change the css with your own needs.

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .container {
      position: relative;
      width: 50%;
    }

    .image {
      display: block;
      width: 100%;
      height: auto;
    }

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #008CBA;
    }

    .overlay:hover {
     opacity: 1;
}

    .text {
      color: white;
      font-size: 20px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      text-align: center;
    }
    </style>
    </head>
    <body>

    <div class="container">
    <a href="<?php the_permalink(); ?>">
    <?php if ( has_post_thumbnail() ) : ?>
    <?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>
        <img alt="Avatar" class="image"> src="<?php echo $feat_image; ?>" />
    <?php else: ?>
    <?php $feat_image = get_stylesheet_directory_uri() . '/assets/images/default.jpg'; ?>
        <img alt="Avatar" class="image">src="<?php echo $feat_image; ?>" />
    <?php endif; ?>
      <div class="overlay">
        <div class="text"><?php the_title(); ?></div>
      </div>
    </a>
    </div>

    </body>
    </html>

different actions when I hover over each post in the wordpress loop

The JavaScript and JQuery this keyword is what you are looking for.

What is the this keyword? this points to the object that called your function. It sounds confusing at first but looking at a few simple examples clarifies any confusion. For example, in your case, you need to know what div is being hovered over. What your doing now is writing an individual event for each object and it works in some cases, but obviously runs into multiple problems.

The first is what your question is. How can you tell which one is being hovered over? But there is another problem you could run into. What if you had 50 divs that all needed the same event? It would be both time consuming and space consuming to write 50 lines of CSS display changes. What if there was a way to reduce those 50 lines to one single line?

$('div').mouseenter(function() {

    $(this).css('property','value');

});

So what does this do? Say your HTML markup looked like this:

<div></div>
<div></div>
<div></div>
<div></div>

And you want to apply a CSS property to any of the divs that are hovered over. The above JQuery says:

"when the mouse enters a div, change the CSS of that particular div"

Or in other words, change this div that is currently being hovered over.

Obviously, this idea (pun intended) can be used in many ways to significantly shorten JavaScript programming. If you want to look more into the documentation of this, there's plenty of good sources out there. Here are a few:

http://www.quirksmode.org/js/this.html

http://learn.jquery.com/javascript-101/this-keyword/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

It took awhile for me to grasp, but definitely improved my JS programming once I did. Also important to note: $(this) only works in JQuery, in JavaScript it is simply this. Obviously, you can use the simpler version, this, in JQuery as well.

One last thing, I made a quick demo for you to see a live implementation of the this keyword.

I hope this answer was helpful for you ;)

CSS Hover Over on Thumbnails in Wordpress