Q:

Как при наведении на div заменить его картинкой?

Мне нужно, чтобы блок div при наведении на него заменялся картинкой. Когда курсор убирают с дива, то он возвращался бы назад. У меня есть наработки, но работает немного неправильно.

$('.features-list li #feature-top-dev').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);

$('.features-list li #feature-top-design').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);

$('.features-list li #feature-top-graph-des').hover(
  function() {
    $('.top-wrapper').addClass('d-none');
    $('.feature-top').css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $('.hover-content').fadeIn('slow');
  },
  function() {
    $('.top-wrapper').removeClass('d-none');
    $('.feature-top').css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $('.hover-content').fadeOut('slow');
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
  <li class="col-xl-3">
    <img src="images/features-card-img.png" alt="Bottle">
    <div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
      <h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
      <span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-dev">
      <div class="top-wrapper">
        <i class="fa fa-desktop" aria-hidden="true"></i>
        <h3 class="features-item-header">Web Development</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-design">
      <div class="top-wrapper">
        <i class="fa fa-th" aria-hidden="true"></i>
        <h3 class="features-item-header">Web Design</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
  <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
    <div class="feature-top" id="feature-top-graph-des">
      <div class="top-wrapper">
        <i class="fa fa-pencil" aria-hidden="true"></i>
        <h3 class="features-item-header">Graphic Design</h3>
      </div>
      <div class="hover-content">
        <img src="images/features-card-img.png" alt="Bottle">
      </div>
    </div>
    <div class="feature-bottom mx-auto">
      <p class="features-text">Lorem ipsum dolor sit amet, consectetur.
      </p>
    </div>
  </li>
</ul>

Как выглядит:

Мне нужно, чтобы при наведении на один из блоков с желтым фоном (Web-Dev, Web-Design, Graphic Design) он заменялся на картинку. В данный момент при наведении на любой из этих блоков картинка появляется одновременно во всех 3- блоках, мне же нужно, чтобы, например, при наведении на блок Web-Dev картинка появлялась только в нём, но не в остальных, и так же с остальными блоками.

A:

Вы для каждого блока написали функции для hover, можно написать для всех одну вот так. И еще вы скрывали div и показывали картинку вот так. 
$('.top-wrapper').addClass('d-none');
$('.feature-top').css({
  'padding': '0',
  'background-color': '#f5f5f5'
});
$('.hover-content').fadeIn('slow');

Но к примеру первый $('.top-wrapper') это не один элемент а коллекция всех 
 элементов с классом top-wrapper и потому addClass('d-none') будет для всей выбранной коллекции. В место этого нужно писать так что бы оно было только для потомка с классом top-wrapper для текущего элемента, у которого сработало событие. $(this).find('.top-wrapper'). И точно так же для всех остальных элементов с которыми делаете манипуляции.

$('.features-list li>div').hover(
  function() {
    $(this).find('.top-wrapper').addClass('d-none');
    $(this).css({
      'padding': '0',
      'background-color': '#f5f5f5'
    });
    $(this).find('.hover-content').fadeIn('slow');
  },
  function() {
    $(this).find('.top-wrapper').removeClass('d-none');
    $(this).css({
      'padding': '20px 0',
      'background-color': '#ffea00'
    });
    $(this).find('.hover-content').fadeOut('slow');
  }
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="row features-list justify-content-center justify-content-md-between justify-content-lg-center">
    <li class="col-xl-3">
        <img src="images/features-card-img.png" alt="Bottle">
        <div class="d-flex flex-column bottle-text-wrapper arrow-up text-left mx-auto">
            <h3 class="features-item-header bottle-header">Redesigning With Personality</h3>
            <span class="bottle-small-text ml-auto">in <span class="yellow-text">web design</span></span>
        </div>
    </li>
    <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
        <div class="feature-top" id="feature-top-dev">
            <div class="top-wrapper">
            <i class="fa fa-desktop" aria-hidden="true"></i>
            <h3 class="features-item-header">Web Development</h3>
            </div>
            <div class="hover-content">
                <img src="images/features-card-img.png" alt="Bottle">
            </div>
        </div>
        <div class="feature-bottom mx-auto">
            <p class="features-text">Lorem ipsum dolor sit amet,
                consectetur.</p>
        </div>
    </li>
    <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
        <div class="feature-top" id="feature-top-design">
            <div class="top-wrapper">
            <i class="fa fa-th" aria-hidden="true"></i>
            <h3 class="features-item-header">Web Design</h3>
            </div>
            <div class="hover-content">
                <img src="images/features-card-img.png" alt="Bottle">
            </div>
        </div>
        <div class="feature-bottom mx-auto">
            <p class="features-text">Lorem ipsum dolor sit amet,
                consectetur.</p>
        </div>
    </li>
    <li class="col-10 col-sm-6 col-md-5 col-lg-4 col-xl-3 feature-item">
        <div class="feature-top" id="feature-top-graph-des">
            <div class="top-wrapper">
            <i class="fa fa-pencil" aria-hidden="true"></i>
            <h3 class="features-item-header">Graphic Design</h3>
            </div>
            <div class="hover-content">
                <img src="images/features-card-img.png" alt="Bottle">
            </div>
        </div>
        <div class="feature-bottom mx-auto">
            <p class="features-text">Lorem ipsum dolor sit amet,
                consectetur.</p>
        </div>
    </li>
</ul>

