Jeg er tilbake igjen med noen gode biten på "å plassere en Play ikon over bildet ved hjelp av CSS", etter å ha gått gjennom denne artikkelen dere kan lære enkelt på hvordan vi kan plassere en Play Ikon (annet enn en .gif ikon eller .png ikonet) over et bilde. I enkelte tilfeller kan det hende du har kommet over på å plassere den respektive play-ikonet over respektive videobildet
For eksempel:. Hvis dere ser på nettstedet mitt som er "developersnippets.
com ', mot din høyre kan du se noen videolink i avsnittet som kalles "Videoer Var du kan lære", i denne delen, og så vel som i hele artikkelen siden du kan se video linker som peker til «TechVideoBytes", hvis du ser disse bildene kan du se en "play ikon "på de respektive bildene rett? Bare jeg har plassert en ".gif" bilde over videobildet ved hjelp av CSS. Sjekk ut hvordan jeg har plassert denne ved hjelp av CSS.
DEMO & LAST NED Før kommer til å ha et blikk på HTML og CSS-kode, kan du bare ta en titt på resultatet, og hvis du ønsker å laste ned den samme, så du gjøre same.
Click her for live demo | Klikk her for å laste ned koden
HTML Nedenfor er HTML-koden, der du kan kopiere og lime den inn i en tag
12345
CSS Nedenfor er CSS-kode, for å plassere de respektive spill ikonet over et bilde, bare kopiere nedenfor CSS koden og lim den samme i din respektive stil sheet.
123456789101112131415161718192021222324252627282930313233343536373839404142434445.video-dev {Cursor: pekeren; position: relative; bakgrunn: url (rockingvideo.jpg) no-repeat center; width: 111px; høyde: 157px; venstre: 0px; top: 0px;} .
video-a-link {position: relative;} a {color: # 0E58A0; width: 111px; høyde: 157px; venstre: 0px; top: 0px; display: block;} .video-dev .video-link-span {background: transparent url (play_icon.gif) no-repeat scroll 0PT 50%; markøren: pekeren; color: # 000000; display: block; høyde: 35px; position: absolute; text-align: center; text-decoration: none; vertical-align: bunn; width: 34px; opacity: 0.8; venstre: 38px; top: 68px;} .container overskridende {border: 1px #CCCCCC solid; padding: 3px; width: 111px; høyde: 157px; margin-top: 5px; margin-right: 1px; float: left;}
Tilpass Kode: 1.
Endre filnavnet og banen som jeg bruker og sette inn banen og filnavnet tilsvarende som kreves.
2. Nedenfor er filnavnet for 'play-ikonet ", så endrer det som per kravet, her kan du plassere' gif 'eller' .png 'fil som per requirement.3. Ønsker å plassere showet denne siden av hverandr