Estou de volta com algum bom trecho em "Colocar um ícone de reprodução sobre a imagem usando CSS", Depois de passar por este artigo vocês podem aprender com facilidade sobre como podemos colocar um Play Icon (nada além de um ícone .gif ou ícone .png) sobre uma imagem. Em alguns cenários que você pode ter vindo através de colocar o ícone do respectivo jogo a imagem de vídeo respectivo sobre
Por exemplo:. Se vocês olhar para o meu site que é 'developersnippets.
com', para a sua direita você pode ver alguns links de vídeo na seção chamada "vídeos foram você pode aprender", nesta seção e, assim como na página artigo completo você pode ver alguns links de vídeo que estão a apontar para "TechVideoBytes", se você olhar essas imagens você pode ver um "jogo ícone "nessas respectivas imagens certo? Simplesmente coloquei uma imagem ".gif" a imagem de vídeo usando CSS acabou. Confira como eu coloquei isso usando CSS.
& DEMO baixar antes vai ter um olhar sobre o código de HTML e CSS, você pode apenas ter um olhar para a saída e se você quiser fazer o download do mesmo, então você faz o same.Click aqui para demonstração ao vivo | Clique aqui para baixar o código
HTML Abaixo está o código HTML, onde você pode copiar e colá-lo em uma tag
12345
CSS Abaixo está o código CSS, para colocar o ícone do respectivo jogo sobre uma imagem, basta copiar o código CSS abaixo e cole o mesmo em seu respectivo estilo sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pointer; position: relative; background: url (rockingvideo.jpg) centro no-repeat; width: 111px; height: 157px; left: 0px; top: 0px;} .video-a-link {position: relative;} a {color: # 0E58A0; width: 111px; height: 157px; left: 0px; top: 0px; display: block;} .video-dev .video-link-span {background: url transparente (play_icon.
gif) não repita-0pt rolagem de 50%; cursor: pointer; color: # 000000; display: block; height: 35px; position: absolute; text-align: center; text-decoration: none; vertical-align: bottom; width: 34px; opacidade: 0,8; left: 38px; top: 68px;} .container-border {border: 1px # CCCCCC sólida; padding: 3px; width: 111px; height: 157px; margin-top: 5px; margin-right: 1px; float: left;}
Personalize o Código: 1. Altere o nome de arquivo eo caminho que estou usando e insira o caminho eo nome em conformidade, conforme necessário.
2.
Abaixo está o nome do arquivo para o ícone 'play', então alterá-lo como po