Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Rikki Collier
2,708 PointsBleed an image into parent container
Hi Treehouse
Is there any way for me to bleed an image into its parent container using CSS? The best description I can think of is when one takes a video on an phone (I think iPhone's do it) - the video/image itself takes up about 70% of the width of the page and the rest is this sort of blurred/bleed effect where the image overflows or is copied to fill the background.
I hope you can understand what I mean here. I've tried googling it but perhaps I'm not describing it properly. An example is here: https://www.youtube.com/watch?v=5xC4HWcdt90
At 1.51 on that video you can see what I'm talking about. Is that something that can be done in CSS or does it require something like Photoshop?
Thanks,
Rik
2 Answers
Andreas Frost Nordstrøm-Hansen
2,443 PointsI found and article on stackoverflow on how make that effect.
http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image
Im thinking you make some kind of box to take up the space you want and the filter around with z-index to make it go on top of video.
Rikki Collier
2,708 PointsThanks man :)
Andreas Frost Nordstrøm-Hansen
2,443 PointsIf it worked, remember to mark it as best answer :) So that people know that it worked :)
Good luck!