1

pessoal estou tentando fazer um efeito de hover para adicionar um background-color na minha imagem porem não funciona ele cria o background-color atrás da imagem precisava que ela ficasse na frente estou usando less para fazer isso segue meu código

LESS:

.hover-box {
        position: relative;
        &:hover {
            .img-thumb {
                .opacity(.3);
                background-color: @blue-dark;
            }
            .middle {
                .opacity(1);
            }
        }
    }
    .img-thumb {
        display: block;
        width: 100%;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
        padding: 5px;
    }
    .middle {
        transition: .5s ease;
        color: @white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        .opacity(0);

        i{
            font-size: 30px;
        }
    } 

HTML:

<a href="assets/images/portfolio/thumb/media-thumb.jpg" data-rel="lightcase" title="Projeto-01">
                                        <div class="hover-box">
                                            <img src="assets/images/portfolio/media.jpg" class="img-responsive img-thumb" alt="Projeto 1" title="Projeto 1" />
                                            <div class="middle text-center">
                                                <i class="fa fa-search-plus" aria-hidden="true"></i>
                                             </div>
                                        </div>
                                    </a>
2
  • Já tentou adicionar o z-index: 1 Commented 29/01/2018 às 14:55
  • s e nao funciona Commented 29/01/2018 às 15:14

1 Resposta 1

1

Kirito a melhor opção que achei para o seu caso foi criar um ::after com a cor que vc quer fazer o overlay.

Quando vc usa um background-color na tag <img> vc não vai conseguir passar a cor desse background para cima da imagem. O mesmo acontece quando vc usar por exemplo um box-shadow inset na tag <img> o Box-shadow vai estar lá, mas vai estar por baixo da imagem e vc não vai ver...

Essa foi a solução que cheguei, as vezes pode te atender... Não precisei mexer no HTML, é tudo só no CSS. OBS: As cores estão diferentes pq não tinha as variáveis e o opacity

.hover-box {
    position: relative;
    transition: .5s ease;
    &:hover {
        &::after {
            content: "";
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 5px;
            opacity: 0.5;
            background-color: black; /* COR DO OVERLAY */
        }
        .middle {
            opacity: 1;
        }
    }
}

Aqui tem uma vrsão em CSS funcionando (sem LESS)

.hover-box {
  position: relative;
  transition: .5s ease;
}
.hover-box:hover::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  opacity: 0.5;
  background-color: black; /* COR DO OVERLAY */
}
.hover-box:hover .middle {
  opacity: 1;
}
.img-thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  padding: 5px;
}
      .middle {
        transition: .5s ease;
        color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        opacity: 0;
        z-index: 10;
      }
      .middle i {
        font-size: 30px;
      }
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href="http://placeskull.com/50/50" data-rel="lightcase" title="Projeto-01">
    <div class="hover-box">
        <img src="http://placecage.com/500/500" class="img-responsive img-thumb" alt="Projeto 1" title="Projeto 1" />
        <div class="middle text-center">
            <i class="fa fa-search-plus" aria-hidden="true"></i>
            </div>
    </div>
</a>

Classe onde está o efeito. .hover-box:hover::after

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 .