Text on image on hover implementation

Question

I'm using the following code on the link for a slide show in my portfolio. It has a section for a photo, another one for a title, and another one for an accompanying story. They all change with next and prev buttons at the same time. I'm trying to get the story text show up when mouse hovers over the image. I've been trying to implement various codes I found online but couldn't achieve a result so far. When I try, either the images never show up or the stories never show up and I couldn't find a way around. The type of effect I'm looking for would be the one in the middle of the left side of the screen on this link; http://tympanus.net/jCapSlide/

I am wondering if anyone knows how to implement this animation to my code. And I also want to keep the other sections like the title section functioning the same.

Here is the code I'm using at the moment; http://jsfiddle.net/elliotgray/64nfP/

And below is the code that is used to create hover text animation on the link above in case it might be useful. This is from the downloaded code from their site.

Any help would be appreciated.

(function($) {
    $.fn.capslide = function(options) {
        var opts = $.extend({}, $.fn.capslide.defaults, options);
        return this.each(function() {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;

            if(!o.showcaption)  $this.find('.ic_caption').css('display','none');
            else $this.find('.ic_text').css('display','none');

            var _img = $this.find('img:first');
            var w = _img.css('width');
            var h = _img.css('height');
            $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
            $('.overlay',$this).css('background-color',o.overlay_bgcolor);
            $this.css({'width':w , 'height':h, 'border':o.border});
            $this.hover(
                function () {
                    if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                    $('.overlay',$(this)).show();
                    else
                    $('.overlay',$(this)).fadeIn();
                    if(!o.showcaption)
                        $(this).find('.ic_caption').slideDown(500);
                    else
                        $('.ic_text',$(this)).slideDown(500);   
                },
                function () {
                    if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                    $('.overlay',$(this)).hide();
                    else
                    $('.overlay',$(this)).fadeOut();
                    if(!o.showcaption)
                        $(this).find('.ic_caption').slideUp(200);
                    else
                        $('.ic_text',$(this)).slideUp(200);
                }
            );
        });
    };
    $.fn.capslide.defaults = {
        caption_color   : 'white',
        caption_bgcolor : 'black',
        overlay_bgcolor : 'blue',
        border          : '1px solid #fff',
        showcaption     : true
    };
})(jQuery);

Thank you!

Answer 1

I alter your code.

http://jsfiddle.net/64nfP/3/