Animating image on toggle

I managed to create a div that toggled open and close and then stopped a hover animation while it was open. Which is good, and the div slides open nicely however, the image in the div does not slide open. How do I make the image follow the div instead of just blinking on?

Here is the div unopened:

Here is the div opened, and the .block overflow:visible (once I get this working Ill make the image fit the div:

At the moment the stuff below the image slides down nicely, but the image just changes from overflow hidden to overflow visible without animation. How can I make it with animation?

Here is the html:

<div class="work">
        <h1 class="heading">Selected Projects</h1>
        <div class="line"></div><br>
        <ul>
            <li id="darl">
               <div class="block">
                    <img class="bg-image"  id="bgimg1" src="Images/perspective2final2pfolio2.jpg">
                </div>
                <p>1. Darlington Terrace<i id="close1" class="fa fa-times-circle-o"></i></p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="chil">
             <div class="block">
                    <img class="bg-image"  id="bgimg2" src="Images/DSC_0756.jpg">
                </div>
                <p>2. Children's Playground</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="lawn">
               <div class="block">
                    <img class="bg-image"  id="bgimg3"src="Images/perspective2final2pfolio2.jpg">
                </div>
                <p>3. Lawn Bowl Bakery Bridge</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="aque">
                <div class="block">
                    <img class="bg-image"  id="bgimg4"src="Images/perspective2final2pfolio2.jpg">
                </div>
                <p>4. Aqueduct: Museum of Architecture</p>
            </li>

            <li><div class="thinline"></div></li>
            <li id="velo">
                <div class="block">
                    <img class="bg-image"  id="bgimg5"src="Images/perspective2final2pfolio2.jpg">
                </div>
                <p>5. Velocity Frequent Flyer Website</p>
            </li>

            <li><div class="thinline"></div></li>
        </ul>

    </div>

Here is the jquery (the fadeOutt is for a hover effect that fades in/out the image on the div):

$("#darl").click(function() {
  $(this).toggleClass('expanded');
      if($("#darl").hasClass('expanded')){
     $(this).off('mouseleave',fadeOutt);
}else{
    $(this).on('mouseleave',fadeOutt);
}
});

And here is the css for #darl:

#darl {
overflow: visible;
height: 54px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#darl.expanded {
height: 300px;
}

#darl .block {
overflow: hidden;
}

#darl.expanded .block {
overflow: visible;
transition: all 0.5s ease-in-out;
}

Here is the full code files: http://ift.tt/1ks1Pnr

Thanks so much for help!

Click here view more answers http://ift.tt/1mhPAvs