1

O meu objetivo seria que uma imagem em .png ficasse por cima de uma imagem .jpg ao passar o cursor por cima. Tentei com o seguinte código:

 .image{
 width: 320px;
 height: 180px;
}

.image:hover{
content: url('playplay.png');
}

Mas fica com este aspeto

Ao passar o cursor a imagem jpg desaparece sendo substituida pela png, mas o meu objetivo era que o botão do play ficasse sobre a imagem. As imagens têm exatamente o mesmo tamanho e ficarão nessa disposição (4 alinhadas horizontalmente)

1
  • Adicione o seu html à pergunta. Commented 4/01/2018 às 0:19

2 Respostas 2

1

Acontece que da forma como está fazendo, no hover, você substitui a imagem ao invés de exibir a outra sobreposta. Vai precisar mudar um pouco a estrutura do seu html e adicionar um tratamento no css.

Exemplo

.thumbnail {
    position: relative;
    float:left;
    width: 50%;
}

.image {
  opacity: 1;
  display: block;
  width: 320px;
  height: 180px;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.overlay {
  width: 100px;
  height: 100px;
  transition: .5s ease;
  opacity: 0;
  position: absolute; 
  top: 50%;
  left: 50%;  
  transform: translate(-50%, -50%);  
  background-image: url('//d30y9cdsu7xlg0.cloudfront.net/png/66410-200.png');
  background-repeat: no-repeat;
  background-size: 100px 100px;
  
}

.thumbnail:hover .image {
  opacity: .8;
}

.thumbnail:hover .overlay {
  opacity: 1;
}

.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
<div class="thumbnail">
  <img src="http://www.wikiality.com/file/2016/11/bears1.jpg" alt="Avatar" class="image" style="width:100%">
  <div class="overlay">    
  </div>
</div>
<div class="thumbnail">
  <img src="https://i.imgur.com/9wdP3kK.jpg" alt="Avatar" class="image" style="width:100%">
  <div class="overlay">  
  </div>
</div>

Obs.: As firulas de animação já estavam no meu css, se for necessário posso limpar os efeitos se ficou difícil de entender.

1

Fiz três opções para você. Com Pseudo Element ::after, com Dois Backgrounds (nessa opção o CSS pode ficar mais extenso, mas vale de referência). E fiz um modelo com Position e alternando o z-index no :hover

Execute o Snippet para ver as opções.

/* com pseudo elemente ::after */
.imgafter {
    float: left;
    width: 200px;
    height: 100px;
    margin: .5rem;
    cursor: pointer;
    position: relative;
}
.imgafter:hover::after {
    content: "\25B6";
    color: limegreen;
    font-size: 5rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.img1 {
    background: url(http://fillmurray.com/200/100) no-repeat center;
    background-size: cover;
}
.img2 {
    background: url(http://fillmurray.com/300/100) no-repeat center;
    background-size: cover;
}
.img3 {
    background: url(http://fillmurray.com/300/200) no-repeat center;
    background-size: cover;
}
.img4 {
    background: url(http://fillmurray.com/200/200) no-repeat center;
    background-size: cover;
}
/* com dois backgrounds */
.imagem {
    float: left;
    width: 200px;
    height: 100px;
    background-image: url(http://placecage.com/200/100);
    margin: .5rem;
}
.imagem:hover {
    float: left;
    width: 200px;
    height: 100px;
    background-image: url(https://cdn3.iconfinder.com/data/icons/developerkit/png/Play.png), url(http://placecage.com/200/100);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%, 100%;
    cursor: pointer;
}
/* Com Position */
.base {
    width: 200px;
    height: 100px;
    cursor: pointer;
    margin: .5rem;
    float: left;
    position: relative;
    z-index: 1;
}
.base:hover .play {
    width: 50px;
    height: 50px;
    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    background-color: #0f0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}
<h3>Com ::After</h3>
<div class="imgafter img1"></div>
<div class="imgafter img2"></div>
<div class="imgafter img3"></div>
<div class="imgafter img4"></div>

<br clear="all"/>

<h3>Com Duble Background</h3>
<div class="imagem"></div>
<div class="imagem"></div>
<div class="imagem"></div>
<div class="imagem"></div>

<br clear="all"/>

<h3>Com Position</h3>
<div class="base img1">
    <div class="play"></div>
</div>
<div class="base img2">
    <div class="play"></div>
</div>
<div class="base img3">
    <div class="play"></div>
</div>
<div class="base img4">
    <div class="play"></div>
</div>

3
  • com dois backgrounds foi o que funcionou melhor para mim, tive só que fazer alguns pequenos ajustes porque causa do tamanho das imagens, mas no final ficou perfeito. muito obrigada! Commented 4/01/2018 às 15:13
  • @DianaTaveira Se você optou pela resposta do hugocsl, deve marcá-la como a resposta, não a minha :) Commented 4/01/2018 às 15:21
  • @LeandroAngelo não se preocupe, obrigado pela gentileza ;) tmj
    – hugocsl
    Commented 4/01/2018 às 15:51

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 .