Animation on thumbnail caption

[DJM]

Hi everyone. I am trying to add some simple CSS based animation to the text of the thumbnail hover caption.

I thought the best way to go about this would be to write some css that fires when hovering on the thumbnail as in the below code:

#.thumb:hover > .title {
left: 5%;
opacity: 1;
}

.title {
text-align: left;
transition: all 0.4s ease-in-out;
position: absolute;
left: 0%;
top: 45%;
opacity: 0;
color: #ffffff;
-webkit-transition: all .6s ease;
-moz-transition: all .6s ease;
-ms-transition: all .6s ease;
-o-transition: all .6s ease;
transition: all .6s ease;

}
I can't seem to get this working though, perhaps I am targeting the incorrect classes? Does anybody have any suggestions?

Thanks in advance.

[arminunruh]

Hm so you want to move the title a bit to the right?
Try

.thumb .title{
transition: all 300ms ease;
transform: translateX(-20px);
}
.thumb:hover .title{
transform: translateX(0px);
}

[DJM]

Amazing, thanks much!