image fade in then text not working

Question

When I keep the mouse on image, it should display the text with title and some description. This context is working only for the first image and for the remaining images it's not working.

I used jquery plugin. It's not working. Code below.

What are the changes need to be done, let me know. Thanks in advance

(function($) {
  $.fn.hoverGrid = function(options) {
    var settings = $.extend({
      'itemClass': '.item'
    }, options);

    return this.each(function() {
      var hoverGrid = $(this);
      hoverGrid.addClass('hover-grid');
      hoverGrid.find(settings.itemClass).addClass('hover-grid-item');

      $(hoverGrid).find(settings.itemClass).hover(function() {
          $(this).find('div.caption').stop(false, true).fadeIn(200);
        },
        function() {
          $(this).find('div.caption').stop(false, true).fadeOut(200);
        });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('#whatever').hoverGrid();
});

/*!
     * jQuery Cookiebar Plugin CSS
     * https://github.com/carlwoodhouse/jquery.cookieBar
     *
     * Copyright 2012, Mark Searle, Carl Woodhouse.
     */

.hover-grid .hover-grid-item {
  width: 181px;
  height: 181px;
  margin: 0 18px 18px 0;
  float: left;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  overflow: hidden;
  position: relative;
  cursor: default;
}

.hover-grid img {
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  border: 0;
  position: absolute;
  margin: 0;
  padding: 0;
}

.hover-grid-item .caption {
  background-color: #222;
  width: 145px;
  height: 145px;
  padding: 18px;
  position: absolute;
  left: 0;
  color: #fff;
  display: none;
  line-height: 1.1;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
}

.hover-grid-item .caption p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div id="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

Answer 1

IDs must be unique within an html page. You can change your id=whatever to class=whatever and then use $(".whatever") to apply to all.

Updated snippet:

(function($) {
  $.fn.hoverGrid = function(options) {
    var settings = $.extend({
      'itemClass': '.item'
    }, options);

    return this.each(function() {
      var hoverGrid = $(this);
      hoverGrid.addClass('hover-grid');
      hoverGrid.find(settings.itemClass).addClass('hover-grid-item');

      $(hoverGrid).find(settings.itemClass).hover(function() {
          $(this).find('div.caption').stop(false, true).fadeIn(200);
        },
        function() {
          $(this).find('div.caption').stop(false, true).fadeOut(200);
        });
    });
  };
})(jQuery);

$(document).ready(function() {
  $('.whatever').hoverGrid();
});

/*!
     * jQuery Cookiebar Plugin CSS
     * https://github.com/carlwoodhouse/jquery.cookieBar
     *
     * Copyright 2012, Mark Searle, Carl Woodhouse.
     */

.hover-grid .hover-grid-item {
  width: 181px;
  height: 181px;
  margin: 0 18px 18px 0;
  float: left;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  overflow: hidden;
  position: relative;
  cursor: default;
}

.hover-grid img {
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
  border: 0;
  position: absolute;
  margin: 0;
  padding: 0;
}

.hover-grid-item .caption {
  background-color: #222;
  width: 145px;
  height: 145px;
  padding: 18px;
  position: absolute;
  left: 0;
  color: #fff;
  display: none;
  line-height: 1.1;
  /*-webkit-border-radius: 4px;
    	-moz-border-radius: 4px;
    	border-radius: 4px;*/
}

.hover-grid-item .caption p {
  font-size: 15px;
  font-weight: 400;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="whatever">
        <div class="item">
          <img width="181" height="181" src="/images/logo.jpg" alt="my image" title="my image" />
          <div class="caption" style="display: none;">
            <h2>Some Title</h2>
            <p>This is a caption to end all captions</p>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>