JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
                        <div class="circles-cont">
                          <div class="col-sm-4 text-center icon-click">
                            <p class="circle">
                                <img class="search" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
                            </p>
                            <p class="thetext">
                              <span>Search</span>
                              <br/>
                              <span>afasfasfa</span>
                            </p>
                          </div>

                          <div class="col-sm-4 text-center icon-click">
                            <p class="circle ">
                              <img class="conv" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
                            </p>
                            <p class="thetext">
                              <span>asfsfas</span>
                              <br/>
                              <span>asfasfasf</span>
                            </p>
                          </div>

                          <div class="col-sm-4 text-center icon-click">
                            <p class="circle ">
                              <img class="local" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
                            </p>
                            <p class="thetext">
                              <span>asfasasf</span>
                            </p>
                          </div>

CSS

img:hover{
  background-color: black;
}

JavaScript

$('.icon-click').mouseenter(function () {
  console.log('banana');
   $(this).hover(function(){
     $(this).children("img");
   });
});