Pop up an icon in the middle of my image by hovering the mouse

Question

I am trying to bring up a zoom icon on top of an image while passing the mouse over it (The screen has several images, the icon should appear only in the image that the user passed the mouse)

I tried something like:

.edit_hover_class{
  width:100px;
  height:100px;
  background-image: url("https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-size: cover;
}

.edit_hover_class i{
  display:none;
}
.edit_hover_class:hover i {
  display:block;
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  z-index: 999;
}

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">



                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>
                
                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>
                
                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>

Answer 1

Note that in your code the <i> is inside a <a> then the ideal would be the :hover was .edit_hover_class:hover a and not .edit_hover_class:hover i

Keeping this in mind just put the tag <a> 100% of the height and width of the parent, which in this case is the class .edit_hover_class. And inside that <a> you line up the <i> center, for example using flex as I did in the example below.

.edit_hover_class{
  width:100px;
  height:100px;
  /* background-image: url("https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); */
  /* background-size: cover; */
  position: relative;
}

.edit_hover_class a{
  display:none;
}
.edit_hover_class:hover a {
  display:block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  z-index: 999;

  display: flex;
  justify-content: center;
  align-items: center;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.1/css/mdb.css" />

<div class="edit_hover_class">
    <img class="miniaturaImg" src="https://placecage.com/100/100">
    <a href="#"><i class="fas fa-search-plus"></i></a>
</div>

<div class="edit_hover_class">
    <img class="miniaturaImg" src="https://placecage.com/100/100">
    <a href="#"><i class="fas fa-search-plus"></i></a>
</div>

<div class="edit_hover_class">
    <img class="miniaturaImg" src="https://placecage.com/100/100">
    <a href="#"><i class="fas fa-search-plus"></i></a>
</div>

Answer 2

Your problem is position Absolute, it causes all the icones to escape and appear in the upper right corner. This can be solved by adding position: relative; to the parent container, so:

.edit_hover_class{
  width:100px;
  height:100px;
  background-image: url("https://images.pexels.com/photos/259803/pexels-photo-259803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  background-size: cover;
  position: relative; /* <---------------------*/
}

.edit_hover_class i{
  display:none;
}
.edit_hover_class:hover i {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: auto;
  z-index: 999;
  
  
  
  /*---------- EDIT -------------*/
  display: flex;
  justify-content: center;
  align-items: center;
}

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="css/mdb.min.css" rel="stylesheet">
  <!-- Your custom styles (optional) -->
  <link href="css/style.css" rel="stylesheet">



                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>
                
                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>
                
                <div class="edit_hover_class">
                    <img class="miniaturaImg" src="./produtos/tv01.jpg">
                    <a href='#'><i class="fas fa-search-plus"></i></a>
                </div>

So just style it however you like.

EDIT

I had only read the question without paying attention to the title and was warned by @hugocsl that the question involved centering the icon on the image as well. I won’t reinvent the wheel, so I copied his answer code to center.