$(document).ready(function(){
    $(".start-image-hover").titleBlock({
        removeTitle: false,
        thefontSize: "20px"
    });
});

(function($) {

    $.titleBlock = {

        defaults: {

            removeTitle: true,
            thefontSize: "20"

        }

    }

    $.fn.extend({
        titleBlock:function(config) {

            var config = $.extend({}, $.titleBlock.defaults, config);

            return this.each(function() {

                var theImage    = $(this),
                    removeTitle = config.removeTitle,
                    theFontSizeValue = config.thefontSize;

                theImage
                    .wrap("<div class='image'>")
                    .parent()
                    .append("<h4>&nbsp;</h4>")
                    .find("h4")
                    .html(theImage.attr('title'))
                    .wrapInner("<div style='font-size:" + theFontSizeValue + "px;'></div>")
                    //.find("br")
                    //.before("<span class='spacer'>&nbsp;</span>")
                    //.after("<span class='spacer'>&nbsp;</span>")
                    ;


                if (removeTitle) {

                    theImage
                        .removeAttr("title");

                }


            })


        }

    })


})(jQuery);