Overwrite a <button> to a <img>

Asked

Viewed 11,791 times

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.

html css

3 answers

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:

Example in Jsfiddle

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

Captura de Tela

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.

  • 2

    The center button resolution couldn’t be better +1

  • 1

    Excellent solution, only the box-shadow in the hover that is not working in Firefox and IE :P, but it is a matter of setting +1;

  • 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?

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
Resultado
Result Hover
Resultado quando hover

Example: Jsfiddle

  • 1

    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.