JSFiddle - React, Tailwind, and code Playground

HTML

<div class="object-list-item" id="oli-0" reference="0">
    <div class="close_btn" tooltip_text="Remove this object"></div>
    <img class="thumb" src="http://picselbocs.com/projects/cakemyface/image-gallery/thumbs/3295094303_2b50e5fe03_z.jpg" />
    <div class="text-preview">kjkjhsdfkjhkj kdjfah ksjdhfkashdf</div>
    <div class="clear"></div>
</div>

<script src="http://www.bitstorm.org/jquery/color-animation/jquery.animate-colors-min.js"></script>

CSS

.object-list-item {
    -moz-border-radius: 3px;
    -webkit-border-top: 3px;
    border-radius: 3px;
    border: 1px solid #DDD;
    margin: 50px 10px;
    padding: 8px;
    width: auto; }

.close_btn {
    background: url(http://picselbocs.com/projects/cakemyface/img/delete-icon.png) no-repeat top left;
    cursor: pointer;
    float: right;
    height: 12px;
    width: 12px; }

.thumb {
    width: 30px;
    height: auto;
    float: left;
    margin: 3px 10px 3px 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 5x rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    padding: 2px; }

.text-preview {
    position: relative;
    float: left;
    border: 0;
    width: 150px;
    font-size: 13px;
    height: 34px;
    line-height: 34px;
    overflow: hidden;
    font-family: inherit; }

.clear {
    clear: both; }

JavaScript

$(document)
        .on("mouseenter", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#555" },300);                                                         
        })
        .on("mouseleave", "div.object-list-item", function(){
            $(this).animate({ borderColor : "#ddd" },300);                                                         
        });