Hy guys. I have this problem. So I have an image. In front of that image is simple element with width and height. I want to blur that element so it looks like that part of the picture is blurred. I cannot have any image or background-image in that element. I want to achieve this effect without using any additional image, just css. I tried to put background colour, reducing the opacity and putting filter: blur but it doesn’t look good. I can still read the text that is supposed to be blurred.
It's not possible to do this with full support without javascript, at the moment. But in case you want to support a limited set of browsers, you can use backdrop-filter
The backdrop-filter CSS property lets you apply graphical effects such
as blurring or color shifting to the area behind an element. Because
it applies to everything behind the element, to see the effect you
must make the element or its background at least partially
transparent.
Related
I am working on a drop down menu that I want to make completely with CSS. Within the link I will not only have text that needs to change when hovered over, but also an image. Changing the color of the text is easy. However I am not sure how to swap the images on the hover...
Here is what I want the result to look like:
Where the arrows will be small images that will switch when the link is hovered over. How do I do this using CSS?
http://www.w3schools.com/css/css_image_sprites.asp
Check Image Sprites - Hover Effect section.
Set the image as a background image to a div (with a set width and height), and you can change that value with css.
Ideally put both graphics into one image, so that you can just shift the background position and you don't get any flicker during the transition (Google "css image sprites").
I believe you'd need to use javascript to change the src of an embedded image.
You could also have two images and use display:block and display:none to show/hide them as appropriate, but I don't think that would be the best approach.
Use CSS background: url()... on an element you deem most applicable. Here is documentation and a walkthrough: https://developer.mozilla.org/en-US/docs/Web/CSS/background.
On a side-note, you may want to consider using a sprite as well, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Image_Sprites
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
I have a div element with some child elements, and I'm trying to apply a inset box-shadow the child elements seem to be covering up the box-shadow, here is a jfiddle example:
jsFiddle Demo
If you take away the background-color on the optn class you'll see the inset box shadow there, so my code is valid. So the questions is, how do I make it so the child elements appear under the box-shadow?
Had the same problem, find half-solution (works well if you don't have scroll inside).
You can position background in element under the shadow by placing it inside the :before or :after pseudo-class and setting it z-index: -1. It will do the background part.
But it will create new problem: To position :before element you will need to apply to .optn element "position: relative;" and if you apply "position: relative;" to it it will start to shows from under the rounded corners in Webkit browsers.
If you don't have scroll inside, you can fix it by rounding corners if the first and last .optn element, bit if you want to scroll this content then you unfortunately can't do so.
Anyway there is an example: http://jsfiddle.net/qN99W/
http://jsfiddle.net/wdYpv/3/
Move the background color to the parent.
you can add padding like so: http://jsfiddle.net/jalbertbowdenii/wdYpv/2/
If I'm understanding your own goal correctly, you've already got the answer in your question. ;-) Remove the background-color from optn and add it to optn-group instead.
As you've already discovered, though, if you have a different background color for optn on hover or on active, it's still over top of that inset shadow. The easy and possibly lazy solution is to not modify background-color for those, but to use text-color and other effects (shifting by 1px down, for example). Or if you want the border-radius but for those special cases (hover, active) you can live without the shadow, just set border-radii appropriately.
Other than that, don't let the world brainwash you into thinking that just because we have great new tools in CSS that you can't use images anymore. What you REALLY want to do might still be more easily accomplished with images.
Look at the "pinking shears" effect on numerous webpages, and it's still done with one or more transparent PNGs artfully placed.
Is there a way I can have a partially transparent image (or anything really) overlay a clickable region using XHTML and CSS?
#thirtydot If you know of a solution
that works in only one browser I still
would love to here it! Although the
more support the better.
You can use pointer-events: none.
Browser support: http://caniuse.com/pointer-events (works everywhere except IE10 and older)
http://jsfiddle.net/QC5Yw/
Wrap the overlay and background in a clickable div, and set the opacity attribute of the overlay to something less than 1.
http://www.w3schools.com/Css/css_image_transparency.asp
No, the top z-index element will have the focus. But you can create another transparent top layer over the overlay layer, this one will be clickable. So:
z-index:1 Content element
z-index:2 Mask/Overlay element
z-index:3 Click element
That's because the browser cannot distinguish where your PNG is transparent. It just takes it as an image and will not pass the focus through if there are transparent pixels in it.
Thats why you can put a completely empty div with fixed with and height and it will be clickable.
I have a link that will consist on of 1 image and nothing else. I also need this image to highlight when user hovers over it. I was thinking: use <a> tag and set its height, width and background-image properties in CSS. However, (and I've had a feeling it might do that) the <a> tag's size when rendered in browser is 0x0. I can include a couple of characters between the link tag (and the image shows up ok) but it feels a bit hacky. I was also thinking to use the old trick of 1px transparent image set to the correct size - but this also seems less than correct way of doing it. I also can do the same thing with jQuery (but this seems like trying to kill a fly with a sledge hammer).
Is there an alternative pure CSS/HTML way of achieving this?
Set it to display:block;, by default a tags are set to display inline. You can then set width and height.
By changing the background-position on hover, or changing the background-image, you can do the rollover.
And for the background image, you should use a sprite map. This means make one large image that consists of each image you want to display and only showing part of it as the background. This is really good to do because it pre-loads the hovered image so there is no lag for the user. I also find that it organizes my image directories a bit (instead of having an on/off image for every button I just have one image)