Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

image cropped as a triangle on webpage

image cropped as a triangle on webpage

Problem

This is a real css-challenge, I don't think this is possible:

I've made some white css triangles. and when you hover on a triangle, the white triangle should change in a photo also cropped like a triangle. I've made a jsfiddle for it:

fiddleLink

Any help appreciated

Problem courtesy of: woutvdd

Solution

You can use svg to achieve this effect: http://jsfiddle.net/xTd6Y/4/

css

body {
    background-color: #e0e0e0;
}
#image-wrapper {
    position: relative;
}
.svg-background, .svg-image {
    clip-path: url(#clip-triangle);
}
.svg-image {
    visibility: hidden;
}
.clip-svg .svg-image:hover {
    visibility: inherit;
}

/* size and positioning */
 svg.clip-svg {
    position: absolute;
    height: 250px;
    width: 250px;
}
#svg-1 {
    top: 110px;
    left: 50px;
}
#svg-2 {
    top: 40px;
    left: 140px;
}
#svg-3 {
    top: 160px;
    left: 250px;
}

The Clipping Path is defined in svg#svg-defs, and can be set to whatever you like.

Image attributes are visible to / accessible by js and css. You can apply the clipping path to any html element with css of

myElement {
    clip-path: url(#clip-triangle);
}

but this is only reliable on firefox so far as I can tell.

Note: solution only tested on FF and chrome

note: small edit to move :hover from the svg to the embedded image, to correct problem with hover triggered outside clip area

Solution courtesy of: Dom Day

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

image cropped as a triangle on webpage

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×