Title: Title on hover
Last modified: August 21, 2016

---

# Title on hover

 *  Resolved [forthepony](https://wordpress.org/support/users/forthepony/)
 * (@forthepony)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/title-on-hover/)
 * Hey
 * I managed styling my related posts as i wanted, but i still have a question :
   is it possible to have the article title shown only when hovering the thumbnail?
 * Something like on this, in “related” [http://www.kayture.com/2014/02/baby-diamond.html](http://www.kayture.com/2014/02/baby-diamond.html)
 * Thank you
 * [https://wordpress.org/plugins/contextual-related-posts/](https://wordpress.org/plugins/contextual-related-posts/)

Viewing 1 replies (of 1 total)

 *  Plugin Author [Ajay](https://wordpress.org/support/users/ajay/)
 * (@ajay)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/title-on-hover/#post-4601454)
 * Hi,
 * I’m no expert on CSS, but here is the CSS code on the site above that brings 
   this all together. Not sure if this helps in your implementation
 *     ```
       .loop-hover__title{
       	margin:25px
       0 18px;
       	text-align:center;
       	text-transform:uppercase;
       	font-family:'NovecentowideNormalRegular';
       	font-size:20px;
       	letter-spacing:2px;
       	color:#191919
       }
   
       .loop-hover__block{
       	position:relative;
       	width:210px;
       	text-align:center
       }
   
       .loop-hover__link{
       	display:block;
       	position:absolute;
       	top:0;
       	right:0;
       	bottom:0;
       	left:0;
       	text-transform:uppercase;
       	font-family:'NovecentowideNormalRegular';
       	font-weight:400;
       	line-height:140px;
       	letter-spacing:2px;
       	background-color:#fff;
       	background-color:rgba(255,255,255,.8);
       	visibility:hidden;
       	opacity:0;
       	-webkit-transition:opacity .3s ease-out, visibility 0s ease-out .3s;
       	transition:opacity .3s ease-out, visibility 0s ease-out .3s
       }
   
       .loop-hover__link>*{
       	display:inline-block;
       	line-height:1.2;
       	vertical-align:middle;
       	*display:inline;
       	*zoom:1
       }
   
       .loop-hover__link
       .title{
       	margin:0
       10px;
       	font-size:14px;
       	color:#191919;
       	max-height:46px;
       	overflow:hidden
       }
   
       .loop-hover__link
       .time{
       	margin:5px
       0 6px;
       	font-size:10px;
       	color:#777
       }
   
       .loop-hover__link
       .more{
       	height:21px;
       	text-indent:-9999px;
       	background:transparent url(/wp-content/themes/kayture/images/icons/icn-more_hover.png) center top no-repeat
       }
       ```
   
 * and sample HTML
 *     ```
       <li class="slider-item">
           <div class="loop-hover__block">
               <img src="http://www.kayture.com/wp-content/uploads/2014/02/080mango_looks-0038-210x140.jpg" alt="MANGO 080 LOOK" />
               <a class="loop-hover__link" href="http://www.kayture.com/2014/02/mango-080-look.html" rel="bookmark" title="MANGO 080 LOOK">
                   <div>
                       <div class="title">MANGO 080 LOOK</div>
                       <div class="time">
                           <time pubdate datetime="2014-02-05T08:30:00+01:00">February 5, 2014</time>
                       </div>
                       <div class="more">More</div>
                   </div>
               </a>
           </div>
       </li>
       ```
   

Viewing 1 replies (of 1 total)

The topic ‘Title on hover’ is closed to new replies.

 * ![](https://ps.w.org/contextual-related-posts/assets/icon-256x256.png?rev=2985705)
 * [Contextual Related Posts](https://wordpress.org/plugins/contextual-related-posts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contextual-related-posts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contextual-related-posts/)
 * [Active Topics](https://wordpress.org/support/plugin/contextual-related-posts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contextual-related-posts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contextual-related-posts/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Ajay](https://wordpress.org/support/users/ajay/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/title-on-hover/#post-4601454)
 * Status: resolved