Question

I have prepared a fiddle here:

http://jsfiddle.net/JGFFd/25/

What I am aiming for is, when hovering on the coloured box, for the coloured box and avatar to animate to the left so that the coloured box grows in size and shows the text contained in the inner span.

It sounds simple like that but I can’t seem to work it out so any help would be appreciated.

Here is a copy of the code that’s in the fiddle:

<div class="blog-posts-grid-box">
    <div class="blog-posts-grid-box-content" id="grid-box0" data-id="id-0">                   
        <h3 class="grid-blog-title">Title</h3>
        <div class="blog-posts-grid-box-excerpt">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do...</div>    
    </div> <!-- blog-posts-grid-box-content -->

    <div class="blog-posts-grid-box-pic">
        <img src="http://cdn2.iconfinder.com/data/icons/humano2/128x128/apps/comix.png" class="photo">
        <a href="#" target="_top">                      
            <span class="food">
                <span class="inner">Martin Carlin - Food</span>
            </span>
        </a>
    </div> <!-- blog-posts-grid-box-pic -->
</div>




.blog-posts-grid-box {
    float: left;
    background-color: white;
    width: 218px;
    height: 223px;
    padding: 10px 0 0 24px;
    margin-right: 11px;
    margin-bottom: 15px;
    overflow: hidden;
    border: 1px solid #333;
}

.blog-posts-grid-box-content {
    width: 195px;
    height: 145px;
}

.blog-posts-grid-box-excerpt {
    margin-top: 10px;
    height: 30px;
    font-size: 13px;
}

h3.grid-blog-title {
    font-weight: bold;
    color: #24212A;
    font-size: 16px;
}

.blog-posts-grid-box-pic {
    position: relative;
    bottom: -32px;
    right: -115px;
    -webkit-transition: width 1s ease-in-out, visibility 1s linear;
    -moz-transition: width 1s ease-in-out, visibility 1s linear;
    -o-transition: width 1s ease-in-out, visibility 1s linear;
    transition: width 1s ease-in-out, visibility 1s linear;
}

.blog-posts-grid-box-pic img {
    width: 52px;
    height: 52px;
    margin-right: -4px;
}

.blog-posts-grid-box-pic span.food {
    background-color: #FFA100;
}

.blog-posts-grid-box-pic span {
    height: 52px;
    width: 52px;
    display: inline-block;
    background: url('/wordpress/wp-content/plugins/wpbook/team21/images/blog-grid-chevron.png') no-repeat 23px 21px;
    top: -42px;
    position: relative;
}

.blog-posts-grid-box-pic .inner {
    display: inline-block;
    visibility: hidden;
    white-space: nowrap;
    width: 0%;
    overflow: hidden;
    color: white;
}

.blog-posts-grid-box-pic span:hover {
    width: 170px;
    visibility: visible;
    margin-left: -110px;
}

.blog-posts-grid-box-pic.inner span:hover {
    visibility: visible;
}

​
​

Answer 1

I’m a little confused by what you are asking here. This is what I have cobbled together from your jsFiddle: http://jsfiddle.net/JGFFd/26/

I’ve switched the position of the <img /> and <a /> so that the avatar is affected by the .food transition. I’ve also replaced the css selectors using span in favour of using the class names. I think this is where you were getting the bulk of the issues.

Please just let me know if this is not what you were after and I’ll take another swing!

🙂