CSS - Flip image

Persijn is correct. The image don't flip. What flips is the entire container, as in the card at the bottom:

<div class="flip-container">
    <div class="flipper" onclick="this.classList.toggle('flipped')">
        <div class="front">
            <div class="ui-draggable gemaakt dropped"> </div>
        </div>
        <div class="back">
            <img src="./img/test.jpg">
        </div>
    </div>
</div>

So, to make things happen, you could change the HTML of .cards img to accomplish that structure and change the draggable to .cards .flip-container.

To make it more easy to show you the fiddle, I just added this script to prepare the correct structure, instead of changing the HTML:

$(".cards img").each(function() {
    $(this).wrap('<div class="front"></div>').parent().wrap('<div class="flipper"></div>').parent().wrap('<div class="flip-container"></div>').append('<div class="back">FLIPPED</div>');
});

Then, with the correct structure, I changed the draggable to the .flip-container, as I mentioned above:

$(".cards .flip-container").draggable({

And changed its stop handler to make the card flippable when dropped at the correct place, by adding the onclick callback:

stop: function (event, ui) {
    ui.helper.removeClass("draggable");
    var imgSrc = ui.helper.find("img")[0].src.split("/");
    var image = imgSrc[imgSrc.length - 1];
    if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
         ui.helper.find(".flipper").attr("onclick", "this.classList.toggle('flipped')");            
    } else {

    }
}

Finally, added that styling to don't break the look and feel:

.flip-container, .front, .back {
    display: inline-block !important;
    height: 150px !important;
}
#dvDest img {
    margin: 0px !important;
}