Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: CSS image mask?

  1. #1
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS image mask?

    Greetings all.

    Can I do this with CSS: I want to display only a portion of an image, in effect to mask the rest of the image. For instance, if I have an image 1200px by 1600px, I want to show only a slice of it, say 450px by 100px. I can imagine how, if a "window" can be created, it could be located by coordinates within the larger image itself. But I can't figure out whether and how this "peek" of something larger might be done.

    Thanks for any suggestions.

    Cheers,

    Simon

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    clip is what you want - http://www.w3schools.com/css/pr_pos_clip.asp

    Note that the criteria for clip have changed between CSS2 and 2.1 - an element must now be absolutely positioned to have clip, and clip can be applied to elements with hidden overflow.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes! Thanks a million. This does the trick.

    Once again this forum comes through. What a pleasure to find such helpful people.

    Cheers,

    Simon

  • #4
    New to the CF scene
    Join Date
    Aug 2004
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    May I come back for one more bite at the cherry?

    I've got the image to do what I want, using overflow:hidden on the containing paragraph. And I've got a fancy effect I'm playing with, where I have an offset border, using a relatively positioned, empty paragraph with a border. (see screenshot ) But I've got a stubborn gap between the two prior paragraph elements and the next paragraph, which would be a normal text paragraph. I think the problem is that when I displaced the fancy effect border paragraph by 90px (to overlap it on the image) it left a 90 px space. How do I get the flow to resume without the gap?

    My html is:
    Code:
    <p class="imagep"><img src="/images/7numbersmenu.jpg"></p>
    <p class="imagepx"></p><p>this is now a test</p>
    My immediately relevant CSS is:
    Code:
    .imagep {
          position:relative;
          left:-35px;
           margin-bottom:0;	
           padding:0;
           overflow:hidden;
           width:470px;
           height:90px;
           }
    
    .imagepx {
    border:thin solid gray;
    position: relative;
    top:-90px;
    left:-25px;
    width:470px;
    height:90px;
    margin-bottom:-90px;
    padding:0;
         }
    Thanks,

    Simon


  •  

    Posting Permissions

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