Attempting to recreate the image box from this page
on my blog where the blog posts are displayed. I believed all that was required was a thumbnail arrow, but it is not displaying correctly with the current CSS file.
<style>
.thumbnail-arrow { width: 28px; height: 28px; position: absolute; bottom: -9px; right: 20px; background-image: url(./images/sprite1.png); background-size: 4300%; background-position: 7.993% 82.292%; transition: all 0s ease-in-out; }
</style>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<a href="<?php the_permalink(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/default-image.jpg" alt="<?php the_title(); ?>" /></a>
<?php } ?>
<div class="thumbnail-arrow"></div>
</div>
Trying to mimic the hover effect here, but unable to figure out where the orange color is applied on the product image in the first link along with the arrow