Styling a specific post after hovering over it

Question

Background

My website is organised in a grid layout of four columns of divs. Each div is a container for a post and is a square of 200 x 200px. The title is a header at the bottom of the div and there is either an excerpt or a featured image above. Currently, if you click on either the excerpt text/featured image or the header, you will be taken to a page with that specific content.

Problem

I saw this codepen, and I wanted to emulate the same effect (preferably without haml and scss). In any case, what I wanted was for each div post to have a certain background and border colour with just the header in the centre, then after a hover or touchend, move the header down, remove background and border colours and reveal either the excerpt or the featured image.

I tried doing this by creating a div above each post called the hoverzone. Hovering over the zone would then change that div's class from post to post-hover with it's own separate styling. I got this to work except it would only change the first post's styling.

Because of Wordpress's loop, all posts have the same class and ID, i.e. 'post' and 'uniquepost' respectively.

Is there a way to do a targeted selection of a specific post and change that post's style only during a hover or after a touchend?

I tried using php with the class: hoverzone_<?php the_title_attribute(); ?>, only to realise that this could not be integrated into either JQuery nor CSS.

Thank you,

Answer 1

I'm not sure why this question is related to WordPress, but you should be able to accomplish what you're after with just CSS as demonstrated in the following Codepen.

In case something happens to that, the code is copied here.

HTML

<div class="wrapper">
  <a href="#">
    <article class="has-featured-image">
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
      <div class="featured-image">
        <img src="https://lorempixel.com/200/200/"/>
      </div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
  <a href="#">
    <article>
      <div class="post-title">Title</div>
      <div class="post-excerpt">This is an example excerpt. It is two sentences.</div>
    </article>
  </a>
</div>

CSS

* {
  transition: all 0.2s ease-in-out;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 2rem auto;
  width: 500px;
}
article {
  background-color: #eee;
  border: 1px solid #333;
  color: #000;
  height: 200px;
  margin: 0.125rem;
  max-height: 200px;
  max-width: 200px;
  min-height: 200px;
  min-width: 200px;
  overflow: hidden;
  position: relative;
  width: 200px
}
article:hover {
  background-color: #fff;
  background-image: initial;
  border-color: #fff;
}
.post-title {
  bottom: calc( 50% - 1rem );
  font-size: 2rem;
  left: calc( 50% - 2rem );
  max-width: calc( 100% - 3rem );
  position: absolute;
  z-index: 99;
}
.post-excerpt {
  color: #eee;
  left: 2rem;
  max-width: calc( 100% - 3rem );
  position: absolute;
  top: 3rem;
  transition: all 0.2s ease-in-out;
}
.featured-image {
  opacity: 0;
  z-index: 0;
}
article:hover .post-title {
  bottom: 2rem;
}
article:hover .post-excerpt {
  color: #111;
}
article.has-featured-image .post-excerpt {
  display: none;
}
article:hover .featured-image {
  opacity: 100;
}

Answer 2

You can use the post_class() function to insert html classes specific to that post, or, just add a HTML class that contains the post ID. post_class will add classes for the post ID, type, etc