Sobreposição de preto transparente na imagem pairar com apenas CSS?

Eu estou tentando adicionar uma sobreposição preta transparente a uma imagem sempre que o mouse está pairando sobre a imagem com apenas CSS. Isso é possível? Eu tentei isso:

http://jsfiddle.net/Zf5am/565/

Mas não consigo que o div apareça.

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; display: none; background-color: red; z-index: 200; } .overlay:hover { display: block; }

Eu sugiro usar um elemento pseudo no lugar do elemento de sobreposição. Como os pseudo-elementos não podem ser adicionados em elementos img fechados, você ainda precisa envolver o elemento img .

EXEMPLO AO VIVO AQUIEXEMPLO COM TEXTO

 

Quanto ao CSS, defina as dimensões opcionais no elemento .image e posicione-o relativamente. Se você está apontando para uma imagem responsiva, apenas omita as dimensões e isso ainda funcionará (exemplo) . Vale a pena notar que as dimensões devem estar no elemento pai em oposição ao próprio elemento img , veja .

 .image { position: relative; width: 400px; height: 400px; } 

Dê ao filho img element uma largura de 100% do pai e adicione vertical-align:top para corrigir os problemas padrão de alinhamento da linha de base.

 .image img { width: 100%; vertical-align: top; } 

Quanto ao pseudoelemento, defina um valor de conteúdo e posicione-o absolutamente em relação ao elemento .image . Uma largura / altura de 100% garantirá que isso funcione com dimensões de img variables. Se você quiser fazer a transição do elemento, defina uma opacidade de 0 e adicione as propriedades / valores de transição.

 .image:after { content: '\A'; position: absolute; width: 100%; height:100%; top:0; left:0; background:rgba(0,0,0,0.6); opacity: 0; transition: all 1s; -webkit-transition: all 1s; } 

Use uma opacidade de 1 ao passar o mouse sobre o pseudoelemento para facilitar a transição:

 .image:hover:after { opacity: 1; } 

FIM RESULTADO AQUI


Se você quiser adicionar texto no hover:

Para a abordagem mais simples, basta adicionar o texto como valor de content do pseudoelemento:

EXEMPLO AQUI

 .image:after { content: 'Here is some text..'; color: #fff; /* Other styling.. */ } 

Isso deve funcionar na maioria dos casos; No entanto, se você tiver mais de um elemento img , talvez não deseje que o mesmo texto seja exibido em foco. Portanto, você poderia definir o texto em um atributo data-* e, portanto, ter um texto exclusivo para cada elemento img .

EXEMPLO AQUI

 .image:after { content: attr(data-content); color: #fff; } 

Com um valor de content attr(data-content) , o pseudo-elemento adiciona o texto do .image data-content do elemento .image :

 

Você pode adicionar um pouco de estilo e fazer algo assim:

EXEMPLO AQUI

No exemplo acima, o :after pseudo element serve como a sobreposição preta, enquanto o :before pseudo element é a legenda / texto. Como os elementos são independentes uns dos outros, você pode usar um estilo separado para um melhor posicionamento.

 .image:after, .image:before { position: absolute; opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } .image:after { content: '\A'; width: 100%; height:100%; top: 0; left:0; background:rgba(0,0,0,0.6); } .image:before { content: attr(data-content); width: 100%; color: #fff; z-index: 1; bottom: 0; padding: 4px 10px; text-align: center; background: #f00; box-sizing: border-box; -moz-box-sizing:border-box; } .image:hover:after, .image:hover:before { opacity: 1; } 

Filtro CSS3

Embora este recurso seja implementado apenas no webkit e não tenha compatibilidade com o navegador , vale a pena dar uma olhada em:

 .image img { max-width: 100%; max-height: 100%; -webkit-transition: .2s all; } .image img:hover { -webkit-filter: brightness(50%); } 

Demonstração JSFiddle

Referências

Tópicos semelhantes em SO

  • Como diminuir o brilho da imagem em CSS
  • Converter uma imagem em escala de cinza em HTML / CSS
  • Bordas definidas com o borrão do filtro CSS3

Você estava perto. Isso vai funcionar:

 .image { position: relative; border: 1px solid black; width: 200px; height: 200px; } .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); } .image:hover .overlay { display: block; } 

Você precisava colocar o :hover na imagem e fazer com que o .overlay cubra toda a imagem adicionando right:0; e bottom:0 .

jsfiddle: http://jsfiddle.net/Zf5am/569/

Aqui está uma boa maneira de usar: depois na div da imagem, em vez do div overlay extra: http://jsfiddle.net/Zf5am/576/

 
.image {position:relative; border:1px solid black; width:200px; height:200px;} .image img {max-width:100%; max-height:100%;} .image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

.overlay não tem altura nem largura e nenhum conteúdo, e você não pode passar o mouse sobre display:none .

Em vez disso, dei ao div o mesmo tamanho e posição que a .image e .image valor RGBA ao passar o mouse.

http://jsfiddle.net/Zf5am/566/

 .image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;} .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; } .overlay:hover { background:rgba(255,0,0,.7); } 

Você pode conseguir isso jogando com a opacidade da imagem e definindo a cor de fundo da imagem para preto. Ao tornar a imagem transparente, ela aparecerá mais escura.

 

CSS:

 .image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; } .image img { max-width: 100%; max-height: 100%; } .image img:hover { opacity: .5 } 

Talvez seja necessário definir a opacidade específica do navegador também para que isso funcione em outros navegadores também.

Eu daria uma min-height e min-width ao seu overlay div do tamanho da imagem e alteraria a cor do plano de fundo em hover

 .overlay { position: absolute; top: 0; left: 0; z-index: 200; min-height:200px; min-width:200px; background-color: none;} .overlay:hover { background-color: red;} 

Veja o que eu fiz aqui: http://jsfiddle.net/dyarbrough93/c8wEC/

Em primeiro lugar, você nunca define as dimensões da sobreposição, o que significa que não estava aparecendo em primeiro lugar. Em segundo lugar, recomendo apenas alterar o índice z da sobreposição quando você passa o mouse sobre a imagem. Altere a opacidade / cor da sobreposição para atender às suas necessidades.

 .image { position: relative; width: 200px; height: 200px;} .image img { max-width: 100%; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5} .image:hover .overlay { z-index: 10}