Results 1 to 3 of 3

Thread: Youtube like Image overlapping

  1. #1
    Join Date
    Nov 2008
    Location
    Argentina
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Youtube like Image overlapping

    Hi, I'm new in css and I'd like to know how can I do something like this. Plese watch the image



    Over all thumbnails appear a "plus" sign, and it contains a link to diferent location than the main thumbnail

    I think is about overlaping images. The plus sign over the thumbnail but I don't know an css way of doing it

    Can you suggest me something


    Thanks a lot in advance

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    For overlapping images, the main thing you'll want to use is z-index, it's set to 0 as default for all elements, so if you wanted to overlap two images you could do it like so:

    CSS:

    Code:
    .overlap{
    z-index:1;
    position:relative;
    left:-65px;
    top:-20px;
    border:none;
    }
    
    .overlap:hover{ 
    opacity:0.85;
    -moz-opacity:0.85;
    -khtml-opacity:0.85;
    }
    You can leave out the transparency if you want (doesn't work in IE), but that is basically how it would work, then this would be the HTML:

    Code:
    <img src="images/image1.jpg">
    <a href="#">
    <img class="overlap" src="images/overlap.gif">
    </a>
    Hope this helps, there are probably other ways to do this, and you'll need to modify the positioning to suit your images size.

    Jack.

  3. The Following User Says Thank You to Schmoopy For This Useful Post:

    pascualito (11-18-2008)

  4. #3
    Join Date
    Nov 2008
    Location
    Argentina
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks Jack

    Your example worked right. It solves my problem

    Thanks a lot for your answer

    Cheers

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •