Estoy de nuevo con un buen fragmento de "La colocación de un icono de reproducción sobre la imagen, usando CSS", Después de pasar por este artículo que ustedes pueden aprender fácilmente sobre cómo podemos poner un Juego Icono (nada más que un icono .gif o icono .png) sobre una imagen. En algunos casos es posible que haya llegado a través de la colocación en el icono de juego respectiva sobre la imagen de vídeo respectiva
Por ejemplo:. Si ustedes vistazo a mi sitio es 'developersnippets.
com', hacia su derecha se puede ver algunos enlaces de vídeo en la sección llamada "videos fueron usted puede aprender", en esta sección y así como en la página completa artículo puedes ver algunos enlaces de vídeo, que apuntan a "TechVideoBytes", si miras las imágenes se puede ver un "juego icono "en esas imágenes respectivas verdad? Simplemente he puesto una imagen ".gif" sobre la imagen de vídeo mediante CSS. Echa un vistazo a la forma en que he puesto esta el uso de CSS.
DEMO y descargar Antes de ir a echar un vistazo en el código HTML y CSS, sólo pueden echar un vistazo a la salida y si quieres descargar el mismo, entonces usted hace el same.Click aquí para demostración en vivo | Haga clic aquí para descargar las
código
HTML es el código HTML, donde se puede copiar y pegar en una etiqueta
12345
CSS Abajo está el código CSS, permite colocar el icono de reproducción respectiva sobre una imagen, sólo tienes que copiar el código CSS de abajo y pegar el mismo en su estilo respectiva sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: puntero; position: relative; background: url (rockingvideo.jpg) Centro no-repeat; Ancho: 111px; altura: 157px; left: 0px; top: 0px;} .video-a-link {position: relative;} a {color: # 0E58A0; Ancho: 111px; altura: 157px; left: 0px; top: 0px; display: block;} .video-dev .video-link-palmo {background: url transparente (play_icon.
gif) no-repeat 0pt desplazamiento del 50%; cursor: puntero; color: # 000000; bloqueo de pantalla; altura: 35px; position: absolute; text-align: center; text-decoration: none; vertical-align: parte inferior; Ancho: 34px; Opacidad: 0,8; left: 38px; top: 68px;} .container transfronteriza {border: 1px solid #CCCCCC; padding: 3px; Ancho: 111px; altura: 157px; margin-top: 5px; margin-right: 1px; float: left;}
Personaliza Código: 1.
Cambie el nombre del archivo y la ruta que estoy usando e insertar su ruta y el nombre en consecu