Como colocar um botão em uma imagem

[JulioAugusto 0]

É possível adicionar o formato do filme em uma imagem como no exemplo a baixo:

http://www.filmesonlinegratis.net/

No caso seria o " DVDRip ", que eu possa alterar isso no painel da postagem no wordpress...

Qual código devo usar para fazer isso?

 

[gabriel-costa 1]

Olá Julio,

Bom dia!

 

Para resolver seu problema, temos que utiliza o pseudo-elemento (:before).

 

Exemplo: http://jsfiddle.net/gcdesigner/YZ5xM/

 

HTML

<a href="">
    <div class="imagem dvdrip">
        <img src="https://lh6.googleusercontent.com/-My8yKavurmo/Tag0qzHOrBI/AAAAAAAABvo/beXw47BzGNM/s288/cacaasbruxas.jpg" />
    </div>
    <div class="imagem bdrip">
        <img src="http://omelete.uol.com.br/static/uploads/conteudo/fotos/godzilla___.jpg"/>
    </div>
    <div class="imagem hdrip">
        <img src="https://lh4.googleusercontent.com/-Cxth3oMs1RA/ThEPUT3ZTUI/AAAAAAAACE8/2GN9BSTSqNI/achamada.jpg" />
    </div>
</a>

CSS

.imagem {
    position: relative;
    display: inline-block;
    width: 200px;
    height:250px;
    background: #eee;
    border: 1px solid #ddd;
    box-shadow: 0 0 0 #333;
}
.imagem:before {
    position: absolute;
    background: #d02727;
    color: #fff;
    padding: 4px;
    border-radius: 2px;
    bottom: 5px;
    left: 5px;
    font-size: 12px;
    font-family: arial;
    box-shadow: 0 0 5px #000;
}
.imagem.dvdrip:before { content: "DVDRip"; }
.imagem.bdrip:before  { content: "BDRip"; }
.imagem.hdrip:before  { content: "HDRip"; }

Espero que eu tenha ajudado.