7
The idea is to make a "tumbnail" where the play button is (centered) on the image...
<div>
<img src='imagems/imagem1.png'>
<button>Play</button>
</div>
Thank you for your suggestions and your availability.
7
The idea is to make a "tumbnail" where the play button is (centered) on the image...
<div>
<img src='imagems/imagem1.png'>
<button>Play</button>
</div>
Thank you for your suggestions and your availability.
6
An idea without touching yours Markup is to make use of CSS to position the elements. For this purpose we use a CSS class in order to limit the Scope of applied styles:
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;
}
Upshot
5
My solution consists of a bit of CSS3 and the addition of a class in HTML:
<div class="thumbnail-wrapper">
<img src="imagems/imagem1.png" />
<button></button>
</div>
And the 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);
}
Full example: FIDDLE
This way the button will always be centered in the middle of the image, regardless of its size or the size of the image below it.
3
An implementation suggestion, not exactly with button
, more also functional:
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;
}
Upshot
Result Hover
Example: Jsfiddle
Good adaptation of Markup to a more browser-friendly +1
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
The center button resolution couldn’t be better +1
– Zuul
Excellent solution, only the
box-shadow
in thehover
that is not working in Firefox and IE :P, but it is a matter of setting +1;– abfurlan
Following the Kazzkiq solution, I needed to add another <div></div> as follows: <div class="thumbnail-wrapper"> <img src="imagems/imagem1.png" /> <button></button> </div> </div> <div class="div-informacao-audio"> </div> The idea is to have this last <div> below the previous one and leaning/aligned to the left... However, following the first css, the "tumbanails" appear on the screen in column form. I’ve already "turned around" in the css configuration and can’t solve the problem. What should I do?
– user12141