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