- This topic is empty.
-
AuthorPosts
-
October 29, 2014 at 3:01 am #187261AggressiveSimonParticipant
Hello,
I want to use pure CSS3 to blur any image with a frost, but still have content on top of it. Below is the code I have so far.<div class="container"> <div class="frost"></div> <div class="content"><p>Dont Blur Me</p></div> </div>
.container { height:300px; width:300px; position: relative; background-image: url(https://i.imgur.com/4eair9X.jpg); } .frost { content:""; -webkit-filter: blur(10px); height: 100%; position: absolute; left: 0; right: 0; width: 100%; background-color: rgba(255, 255, 255, 0.5); } .content{ height: 100%; position: absolute; left: 0; right: 0; width: 100%; } .content p { margin-top: 50%; text-align: center; }
October 29, 2014 at 3:17 am #187262Paulie_DMemberCould you make a Codepe.io demo.
You should be aware that the
filter
property has limited support tough.October 29, 2014 at 3:20 am #187263AggressiveSimonParticipantI tried but for some reason it failed, so here is a fiddle instead.
http://jsfiddle.net/2gbkmedu/2/Edit: Here is the codepen
http://codepen.io/anon/pen/clJDpOctober 29, 2014 at 3:26 am #187265Paulie_DMemberTry this
CODEPEN REMOVED AS ACCIDENTALLY OVERWRITTEN
October 29, 2014 at 3:30 am #187266AggressiveSimonParticipantThank you Paulie. How does a radial gradient achieve this effect?
Is it possible to make it have a solid border?
Edit:
So I have made it 100% width and height, how can the blur? go all the way to the edge without leaving a white space?
http://codepen.io/anon/pen/qInDEOctober 29, 2014 at 3:49 am #187267Paulie_DMemberHow does a radial gradient achieve this effect?
It doesn’t as such. the image is blurred using the
filter
property…the gradient just adds a layer of “frosting”.The ‘white-space was just the margin I put on the container
A border…on what?
Ideally an image of what you are trying to achieve would be useful rather that me having to guess…
October 29, 2014 at 5:23 am #187273AggressiveSimonParticipantThe image linked below shows the desired effect and the current effect.
http://i.imgur.com/rmHu78e.pngOctober 29, 2014 at 5:47 am #187274Paulie_DMemberOh…I just remove the gradient…it looks more like what you are after:
October 29, 2014 at 5:52 am #187275AggressiveSimonParticipantI forgot to add the gradient into the image.
The point was that one image has a soft border, and the other does not. It is the latter effect which I am attempting to achieve.October 29, 2014 at 7:46 am #187279Paulie_DMemberGuess I’m just not getting what you are after.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.