A ideia é fazer um "tumbnail" onde o botão play está (centrado) sobre a imagem...
<div>
<img src='imagems/imagem1.png'>
<button>Play</button>
</div>
Agradeço sugestões e a vossa disponibilidade.
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeUma ideia sem mexer na tua markup é fazer uso de CSS para posicionar os elementos. Para o efeito usamos uma classe de CSS de forma a limitar o scope dos estilos aplicados:
HTML
<div class="btn-wrap">
<img src="http://img.youtube.com/vi/DXNAljCahPE/0.jpg">
<button>Play</button>
</div>
CSS
.btn-wrap{
position:relative;
text-align:center;
}
.btn-wrap button{
position:absolute;
z-index:1;
top:50%;
left:50%;
width:60px; /* largura para o botão */
height:30px; /* altura para o botão */
padding:0;
margin:-15px 0 0 -30px; /* margem à esquerda e ao topo metade da medida do botão */
border:0 none;
}
Resultado
A minha solução consiste em um pouco de CSS3 e a adição de uma classe no HTML:
<div class="thumbnail-wrapper">
<img src="imagems/imagem1.png" />
<button></button>
</div>
E o CSS:
.thumbnail-wrapper {
display:inline-block;
position:relative;
}
.thumbnail-wrapper button {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate3d(-50%, -50%, 0);
-moz-transform:translate3d(-50%, -50%, 0);
transform:translate3d(-50%, -50%, 0);
}
Exemplo completo: FIDDLE
Desta forma o botão vai ficar sempre centralizado no meio da imagem, independente do seu tamanho ou do tamanho da imagem abaixo dele.
box-shadow
no hover
que não está funcionando no Firefox e IE :P, mais é questão de ajuste +1;
Uma sugestão de implementação, não exatamente com button
, mais também funcional:
HTML
<div class="video">
<a href="#" title="Titulo do video">
<img src="/img/local-da-imagem" alt="thumbnail"/>
<span class="play"></span>
</a>
</div>
CSS
.video {
width: 250px; /*Tamanho da div com o thumbnail */
height: 150px;
}
.video a {
text-decoration: none;
display:block;
}
.video a span.play {
display:block;
/*Imagem do play que irá aparecer inicialmente*/
background: url('/img/local-da-imagem-do-play') center center no-repeat;
/*Definir valores conforme tamanho da imagem*/
margin: -120px 10px 0 0;
height: 80px;
position: relative;
z-index: 100;
opacity: 0.8;
filter: alpha(opacity=80);
}
.video a:hover span.play {
/*image que irá aparecer quando o mouse estiver em cima da imagem*/
background:url('/img/local-da-imgem-quando-hover') center center no-repeat;
}
Resultado
Resultado hover
Exemplo: JSFiddle