mimi mimi - 3 months ago 10
CSS Question

How to add icon over thumb

I'm not good with php and new to wordpress. I have book custom post type which show all books, basically what I want to do, for an example on my archive-library.php all book posts are shown with title and a thumb.

I want to fade in an icon when hover the thumb.
here is photo from my problem
enter image description here
and here is HTML code which render 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 my code for this part

<?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 idea would be appreciated.

Answer

If I understand you correctly, you want the dis-lib-more element to sit on top of the thumbnail. If thats right, the below CSS additions would work, just adjust the left and bottom as needed

.lib-style a{
    position:relative;
    /*original CSS....*/
}

.dis-lib-more{
    position:absolute;
    bottom:0;
    left:0;
    /*original CSS....*/
}

Here's an example:

.lib-style {
  display: inline-block;
  text-align: center;
  padding: 10px 10px;
  /*margin-bottom: 25px !important;*/
}
.lib-style p {
  margin-top: 10px;
}
.lib-style a {
  position: relative;
  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 {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  width: 50px;
  height: 50px;
  background-image: url('http://placehold.it/45x150');
}
.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;
}
<div class="lib-style" style="">
  <a href="<?php the_permalink(); ?>">
    <img src="http://placehold.it/150x150" alt="">
    <span class="dis-lib-more"></span>
  </a>
  <p class="text-center">Some text here</p>
</div>