Online Aki

Online Aki
Blogueira Proficional
Tecnologia do Blogger.
Home > Codigos HTNL > Mostrar imagem sob outra com hover css

Mostrar imagem sob outra com hover css


Mostrar imagem sob outra com hover css

votar a favor13votar contrafavorita
2
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.
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
inserir a descrição da imagem aqui
Página carregada ao passar o mouse na imageminserir a descrição da imagem aqui
<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... inserir a descrição da imagem aqui
  
compartilharmelhorar esta pergunta
   
@renan: Como assim...? – Charles Fay 12/10/15 às 15:44
   
Separar aonde...já são 2 imagens separadas, vc está sugerindo pra eu colocar o play fora da div? Se for não deu certo. – Charles Fay 12/10/15 às 15:52
   
Editei a pergunta, tem 2 imagens separadas aí.......seja mais claro se não for isso que vc está querendo dizer. – Charles Fay 12/10/15 às 15:58
   
Agora entendi, bem...coloquei a imagem separa do botão ao final da pergunta. – Charles Fay 12/10/15 às 16:10
   
Não seria mais fácil com onmousemove setar o atributo visible como true? – Marcelo Bonifazio 12/10/15 às 16:12
votar a favor15votar contraaceitos
+50
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' ref='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' ref='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>
Página toda

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' ref='#'>
  <img src='http://i.stack.imgur.com/PpaYj.jpg' alt='' />
</a>

<a class='watch' ref='#'>
  <img src='http://i.stack.imgur.com/zksYf.jpg' alt='' />
</a>
11:03:00
às 11:03:00
  • Blogger Comments
  • Facebook Comments

0 comentários:

Postar um comentário

Item Reviewed: Mostrar imagem sob outra com hover css Rating: 5 Reviewed By: Vejamais
Assinar: Postar comentários (Atom)