Question

My question has three parts

Part 1: To show an animated image caption for a image (this part is done as in the example row one http://jsfiddle.net/JBnbG/32/ )

Part 2: Show center part of youtube hqdefault.jpg thumbnail image in a div of 150×150 dimension (This part is also done as second row in the example)

Part 3: I want to integrate the part 1 & part 2 features in to part 3. problem is that caption works but the image is not alined in center as show in second row of the example.

Example is in http://jsfiddle.net/JBnbG/32/

I cant change structure otherwise it wont work caption part work properly

I would appreciate if some can help to fix the issue with keeping the HTML structure intact

Answer 1

Check this working code: http://jsfiddle.net/surendraVsingh/JBnbG/39/

Changes to be done in CSS:

.VideoContainer  > span {
    display: block;    
}
.VideoContainer > span > img {
    display: inline-block;
    margin-left: -60px;
    margin-top: -25px;
}