My php skills are not the greatest and I'm new to wordpress. I have a custom post type for books that displays all the books in my archive-library.php file with titles and thumbnails.
I am looking to add a fading icon when hovering over the thumb. Here is an image showing the issue: https://i.sstatic.net/d9ZpI.png and here is the HTML code that renders in developer tools
<div class="lib-style" style="">
<a href="http://localhost/royayeketab/book/mostafamastoor-2/">
<img width="1012" height="1181" src="http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="movafaghiyat" srcset="http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat.jpg 1012w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-257x300.jpg 257w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-768x896.jpg 768w, http://localhost/royayeketab/wp-content/uploads/2016/08/movafaghiyat-877x1024.jpg 877w" sizes="(max-width: 1012px) 100vw, 1012px">
<span class="dis-lib-more">
</span>
</a>
<p class="text-center">موفقیت پنج</p>
</div>
This is the code I currently have:
<?php $args = array( 'post_type' => 'book');
$loop = new WP_Query( $args ); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="lib-style" style="">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
<span class="dis-lib-more">
</span>
</a>
<p class="text-center"><?php the_title(); ?></p>
</div>
<?php endwhile; // End of the loop. ?>
CSS style:
.lib-style{
display: inline-block;
text-align: center;
padding: 10px 10px;
/*margin-bottom: 25px !important;*/
}
.lib-style p{
margin-top: 10px;
}
.lib-style a{
display: inline-block;
background:#000;
}
.lib-style img{
display: block;
}
.lib-style:hover img{
opacity: 0.5;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.dis-lib-more{
display: none;
width: 50px;
height: 50px;
background-image: url('images/mag.png');
}
.lib-style:hover span{
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
Any suggestions would be greatly appreciated.