Hover effect for popular post widget in blogger - html

Question

I'm very much a newbie, but I'm been trying to figure out how to get a hover effect for my thumbnails for the popular posts widget in Blogger.
I have relatively large thumbnails and I want to have the title of the post appear on hover.
Like this
Can anyone help me with this? I've been trying to find a solution online, but have so far found nothing.

Answer 1

Acutally the below can be simple achieved using display: block; and none but you won't be able to transit the element, hence, inorder to transit the element, we will hide it by using opacity: 0; and on hover we change it to 1, and you can make the background opaque using rgba() and the smoothness using transition. Also, don't forget to make the parent element position: relative; as it holds an absolute positioned child element.
I've made the below example from scratch, you can take a look...
Demo
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
display: block;
}
.title {
opacity: 0;
background: rgba(255,255,255,.5);
padding: 5px;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
position: absolute;
top: 50%;
right: 0;
}
div.wrap:hover .title {
opacity: 1;
}

Answer 2

try this:
suppose you have Html Markup like this:
<div class="thumbnail">
Iam the main content
<div class="onhover">
i am onhover content
</div>
</div>
css:
.thumbnail{
width:200px;
height:100px;
background-color:Red;
}
.thumbnail:hover .onhover {
display: block;
}
see the demo
so basically, what you want is to affect another element(with certain selector), when some other element is hovered, basic syntax is :
sourceSelector:hover targetSelector{ /*whatever css you want to apply*/}