5

Estou tentando fazer surgir um icon de zoom em cima de uma imagem ao passar o mouse por cima (A tela possui varias imagens, deve aparecer o icone apenas na imagem que o usuario passou o mouse)

Tentei algo como:

.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>

2 Respostas 2

8

Repare que no seu código o <i> está dentro de um <a> então o ideal seria o :hover ser .edit_hover_class:hover a e não .edit_hover_class:hover i

Tendo isso em mente basta que vc coloque a tag <a> com 100% da altura e largura do pai, que no caso é a classe .edit_hover_class. E dentro desse <a> vc alinha o <i> ao centro, por exemplo usando flex como fiz no exemplo abaixo.

inserir a descrição da imagem aqui

.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>

2
  • Não existiria melhor imagem para essa resposta! Muito bom.
    – Bulfaitelo
    15/02/2019 às 12:16
  • 1
    @Bulfaitelo esse CDN de imagens é o melhor, só que ele é randômico, cada hora aparece uma figura diferente, mesmo deixando o mesmo tamanho, tem horas que ele carrega uma imagem diferente... Mas p Mr. Cage é o melhor! Se te interessar tem o FillMurray.com que é bem legal tb
    – hugocsl
    15/02/2019 às 12:48
3

Seu problema é o position absolute, ele faz com que todos os icones escapem e apareçam no canto superior direito. Isso pode ser resolvido adicionando position: relative; ao container pai, assim:

.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>

Então basta estilizar como preferir.

EDIT

Havia lido apenas a pergunta sem prestar atenção no título e fui alertado pelo @hugocsl que a pergunta envolvia centralizar o ícone na imagem também. Não reinventarei a roda, então copiei o código da resposta dele pra centralizar.

2
  • 2
    Só uma dica... olha o título da pergunta "Surgir um icon no meio da minha imagem ao passar o mouse" ;)
    – hugocsl
    15/02/2019 às 10:49
  • 1
    Putz verdade... Tinha lido apenas a pergunta. Valeu, vou editar. 15/02/2019 às 11:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .