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.
Related
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.
I have an element (the green color in image)
it has a property
top:-5vw;
Because of this it covers the link in text (1.5% /year) and makes it unclickable.
How do I make it clickable without replacing anything?
I tried using z-index, but that does not work.
Image is of inspect element, so blue colour is region of 2nd element
You can try to use pointer-events: none; on div or use negative z-index like z-index:-1.
z-index is what you are looking for. Z-index has certain things that stop it from acting the way you want it to. common mistakes are setting the position. make sure your positions are not set to static or absolute
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
By default, only the text of links is clickable in IE 6. I’d like to make the entire area inside the link (i.e. including padding) clickable as well.
I also need this area to be transparent, as the link covers half of a photo. Adding a background color makes the padding area clickable, but defeats the object, as the link is hidden.
I could have sworn there was a way to do this.
display: inline-block; usually works for me.
display: inline-block is the correct answer, as Kobi says. There is no div or transparent div behind it, just the link element. When the inline-block attribute is applied to it, any padding (and I think line-height) becomes as if it were part of the link.
I remember having come across the same problem but my recollection is hazy about the proper workaround (and if there even was one).
Can you try giving the link a background-color: transparent or a transparent background image? That might work.
If nothing else helps, give the surrounding element a Javascript onclick attribute, and cursor: pointer to simulate link functionality at least for those with JavaScript.
On a web page I'm creating, I have a div with a background image. I overlay some text over the image that I'll be changing frequently, so that's why I'm using a background image and real text instead of an img tag that contains the text.
The background image contains some click-able areas, so I need an image map.
I think the best way to do this is to have another overlay div with a transparent image, and have an image map for the transparent image that corresponds to the background area click-able areas.
Am I on the right track, or is there a better way?
If you only need the "rectangle" shape for the links in the image map, you could use css defined link positions instead. This is accomplished by specifying the position and setting the background-color to transparent. Here is an example: http://www.position-relative.com/tutorials/tute1_css_bg_image.php
something you might try is placing the background div on "float"
IE
div.background {
float:left;
}
since its got a "float" on it the size of the background wont push the divs that come after it to the side...
then you can make a second div to contain all the text stuff and then use something like :
div.textarea{
position:realtive;
left:50px;
}
to position the text area (that youll be editing a lot) above the div background
IE6 doesn't support transparency so I recommend you use the IE6 png fix hack.