Image overlay készítése CSS-sel

Az egyik projektünkben egy weboldalon olyan képeket kell megjelenítenünk, amiket a felhasználók töltenek fel. Ez még önmagában nem is nagy durranás, csakhogy a dizájner ráálmodott egy-egy Metros nyíl ikont is ezekre a képekre, overlay formájában:

A végeredmény

A feladat nyilván sokféleképpen megoldható, mi a CSS-t választottuk, dolgozzon csak a böngésző. Ehhez kellett először is az eredeti kép:

Az eredeti kép

Továbbá az overlay, ami ugyanakkora, mint az eredeti kép, majdnem teljesen átlátszó és csak a nyíl van rajta:

Az overlay

A kód pedig nagyon egyszerű, csak fordítva kell gondolkodni: az overlayt jelenítjük meg és a kép lesz a háttér:

<img style="background:url(kep.jpg)" src="overlay.png" />

 

Technorati-címkék:
Advertisements

3 thoughts on “Image overlay készítése CSS-sel

  1. Hutchington

    Konkrétan nekem is hasonlót kellett megoldanom mostanában, de én így csináltam:

    .thumbnail .play {
    width: 32px;
    height: 32px;
    position: absolute;
    margin: -90px 0 0 90px;
    background: url(img/play.png) no-repeat;
    }

    Reply
  2. Hutchington

    Csak a html-t nem szereti a hozzászólásban:

    [div class=thumbnail]
    [a href=#]
    [img src=# alt= /]
    [div class=play ][/div]
    [/a]
    [/div]

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s