Je suis de retour avec un bon bout sur "Placer une icône Lecture sur l'image en utilisant le CSS", Après avoir traversé cet article, vous les gars peuvent facilement apprendre sur la façon dont nous pouvons placer un jeu Icône (rien mais une icône .gif ou .png icône) sur une image. Dans certains scénarios, vous pourriez avoir rencontré sur le placement de l'icône de lecture respective sur l'image vidéo respective
Par exemple:. Si vous les gars regarder mon site qui est 'developersnippets.
com', vers votre droite, vous pouvez voir certains liens vidéo en section intitulée «vidéos ont été vous pouvez apprendre", dans cette section et ainsi que dans la page de l'article complet, vous pouvez voir quelques liens vidéo qui sont pointant vers "TechVideoBytes", si vous regardez ces images que vous pouvez voir un "jeu icône "sur ces images respectives droit? Simplement je l'ai placé une image ".gif" sur l'image vidéo en utilisant le CSS. Découvrez comment je l'ai placé cette aide de CSS.
& DEMO TÉLÉCHARGER Avant d'aller à avoir un regard sur le code HTML et CSS, vous pouvez simplement jeter un oeil à la sortie et si vous voulez télécharger le même, alors vous faites le same.Click ici pour démonstration en direct | Cliquez ici pour télécharger le code
HTML ci-dessous est le code HTML, où vous pouvez copier et coller dans un tag
12345
CSS Voici le code CSS, de placer l'icône de lecture respective sur une image, il suffit de copier le code CSS ci-dessous et collez le dans votre style même respective sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pointer; position: relative; background: url (rockingvideo.jpg) centre no-repeat; largeur: 111px; hauteur: 157px; gauche: 0px; top: 0px;} .video-a-link {position: relative;} a {color: # 0E58A0; largeur: 111px; hauteur: 157px; gauche: 0px; top: 0px; display: block;} .video-dev .video-lien-portée {background: url transparent (play_icon.
gif) no-repeat scroll 0pt 50%; cursor: pointer; color: # 000000; display: block; hauteur: 35px; position: absolute; text-align: center; text-decoration: none; vertical-align: bottom; largeur: 34px; opacité: 0,8; gauche: 38px; top: 68px;} .container-frontière {border: 1px #CCCCCC solide; padding: 3px; largeur: 111px; hauteur: 157px; margin-top: 5px; margin-right: 1px; float: left;}
personnaliser le code: 1.
Changez le nom de fichier et le chemin que je me sers et insérez votre chemin et le n