Mostrar imagem sob outra com hover css – css css3 css-hover

Como faço para que quando eu passe o mouse sob uma imagem, apareça uma outra por cima com opacidade…

Por exemplo: Tenho uma div com a imagem da capa de um filme, quando eu passar o mouse sob a div, gostaria de exibir o botão PLAY.

O único material relacionado que encontrei na internet foi este link que ensina como mostrar legendas sob a imagem, o qual adaptei para a minha necessidade.

http://www.kadunew.com/blog/css/mostrar-legenda-ao-passar-o-mouse-sobre-imagens

Quando passo o mouse sob a imagem aparece o botão de PLAY…

No entanto, não está da forma que preciso, pois o botão de play aprece ao lado da imagem quando carrega a página.

Página carregada sem passar o mouse na imagem

Página carregada ao passar o mouse na imagem

<style>
.imgefeito{
    margin: 0;
    overflow: hidden;
    float: left;
    position: relative;
}
.imgefeito a {
    text-decoration: none;
}
.imgefeito a:hover {
    cursor: pointer;
} 


.imgefeito a:hover .desc{
    display: block;
    font-size: 1.2em;
    padding: 10px 0;
    color: #fff;
    position: absolute;
    bottom: 11px;
    padding: 10px;
    margin: 0;
}
</style>


<div class="imgefeito">
<a href="#">
    <img src="rrr.png" alt="Daim Graffiti" />
    <span class="desc">
        <img src="play.png" alt="Daim Graffiti" />
    </span>
</a>
</div>

Existe uma maneira de utilizar este código corretamente, ou outra implementação mais simples e objetiva?

Botão de play…

Tem várias formas de fazer.

Eu optaria por colocar a imagem de play em um elemento ::after para não sujar o código html, por ser somente uma informação “visual” de que o elemento é um conteúdo de mídia.

Seria interessante estar no html se fosse algo dinâmico, que precisaria ser alterado com frequência. No seu caso aparentemente será a mesma imagem para todos os elementos, então pode criar uma classe para agrupar essas regras em comum.

Vou deixar dois exemplos:

s/ alterar a cor de background:

.watch {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 200px;
}

.watch:hover::after {
  visibility: visible
}

.watch img {
  width: 100%
}

.watch::after {
  background: url(http://i.stack.imgur.com/Iy23q.png) no-repeat;
  background-position: 45% 55%;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>

alterando a cor de background:

.watch {
  display: inline-block;
  height: 200px;
  position: relative;
  width: 200px;
}

.watch:hover::after {
  visibility: visible
}

.watch img {
  width: 100%
}

.watch::after {
  background: url(http://i.stack.imgur.com/Iy23q.png) no-repeat,
              rgba(255, 255, 255, .6);
  background-position: 45% 55%;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 100%
}

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' href='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>