I don't understand why the background color is not being applied as expected here. This might be a lack of understanding on my part as to the relationships between elements in CSS?
The page in question: http://www.preview.imageworkshop.com/portfolio/
Replicating the issue
First, open the above link in IE 7 or IE 8
Click the PRODUCT filter, then press the PROMO & EDITORIAL filter
White dots will have appeared on some of the images (this is a bug in IE which causes some pixels to be left transparent after a fade animation. if you don't see them, do a little more filtering, they turn up fairly quickly.
CSS BACKGROUND COLOR PROBLEM
What works:
If I set the background color for the gallery background to be red, then this red color shows throught the transparent spots on the images. (The inference here, is that a background color of black hides the 'white spots' bug).
#isotopegallery{background:red;}
What doesn't work:
Obviously, I don't want to set the gallery background color to be anything but white.
What I want to do is set the background color of the DIV that contains the images, for example:
.photo{background:red;}
however, when i do this, the red background color does not show up through the transparent pixels??
The simplified overview of the structure of the elements is as follows
<div id="isotopegallery" class="photos">
<div id="ngg-gallery-18-71">
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
<div class="photo"> <p><a> <img /> </a></p> </div>
</div>
</div>
HELP!
I can't figure out why this background color works for the #isotopegallery parent DIV, but not for the .photo DIV?
When i look in firebug, the color property is set for the .photo div, but does not show through the transparent pixels?
This is the last issue that his holding up go live for our website, and it is driving me nuts!
I would really appreciate any help that you can provide to help me resolve this issue.
NOTE: there is info around that suggests that changing the blackpoint of the images in photoshop will fix this problem. We have tried this method, and have found it does not work.
Are you floating the interior elements of .photo without clearing them? That would prevent the background color from covering the height of the element in question.
If that's the case, appending something like <br style='clear: both;' /> to the .photo div should do the trick.
Likewise, you could always try applying the background color to the img elements themselves: .photo img { background-color: red;}
The creator of isotope has been helping me look at this issue, and has added the following comment:
"Did some more testing. I've come to the conclusion IE treats the
entire element, which contains the image, as one 'image'. Whatever is
visible gets flattened. If that element has a true-black pixel within
an image, than that pixel of the element will be treated as
transparent, regardless of what's actually behind the image.
Take a look at: http://support.metafizzy.co/2011/09-06-ie-trans.html
You'll see a couple transparent pixels pop up, even though the
background of each item is clearly red (items have padding, background
is red). I then dynamically changed their color to blue and the pixel
is still transparent.
Which means the only pure-CSS solution is to set the container
background to black"
Not sure where to go from here. We have tried moving the black point (as this is supposed to be caused by true black pixels), but have found this to be an unsucessful method.
I found a solution to this issue. I have posted full details against this thread (link below), which describes the issue in more detail.
IE fade causing white spots on images
Related
For a little private project I've a map that consists of multiple images, put over each other, each one with a different transparent part, so all of them together form the map. All images have the same size and start at 0,0 (to make it easy to align).
Now it would be nice to have popups for the different parts, but obviously only the top-most image get's all the mouse hovers...
<p style="position:relative">
<img id="de_background" src="background.gif" style="position:absolute;left:0px;right:0px"/>
<img id="de_10" src="1.gif" style="position:absolute;left:0px;right:0px" title="Title 1"/>
<img id="de_12" src="2.gif" style="position:absolute;left:0px;right:0px" title="Title 2"/>
So, is there a clever trick to allow hover/popus also for the part of the image that isn't transparent? Can I somehow ask via JavaScript "Which of the images here is not transparent on this point?".
You set transparent in CSS properties or gif images are transparet yet? and by the way, you don't wrote elements z-index
Just use the display CSS property for all elements that you want to hide, apart from the first one. You can even apply the CSS property through JS and toggle between hidden and the visible one.
.hiddenImg {
display: none;
}
More info: http://www.w3schools.com/css/css_display_visibility.asp
So, I have this project to do for school and and partially got my answer from Reveal image underneath a mask css/javascript which is awesome.
The thing is, I do not want the color to move when I point my mouse over to the glass. Instead, what if I have 5 small thumbnails of different colors (listing on the side of the glass), which when I point to each of them, that would be the color moving in the glass. Is that possible? Would someone help me please.
Thank you very much!
Basically you need to change the color of the div that is the water "animation". Which you can easily do with $("div").css("background-color", color); that is attached to events on some display objects (5 small thumbnails in your case).
Here is a small example # JSFiddle: http://jsfiddle.net/MartinTale/Mz6VH/1/
As Martin said, you can simply change the background color based upon what you are hovering. However this can be slightly problematic if you then hover over a different color (the color will then switch before finishing the animation).
If you have some markup like this:
<img src='http://www.videsignz.com/testing/images/water-front2.png' />
<div id="blue-fill"></div>
<div id="red-fill"></div>
<div id="green-fill"></div>
<div class="thumbnails">
<div id="blue"></div>
<div id="red"></div>
<div id="green"></div>
</div>
And you can use this line of jQuery in your function to get the corresponding element
var theFill = "#" + $(this).attr("id") + "-fill";
This is basically grabbing the id of the current hovered element and concatenating on the format of your fill selector.
You can then grab select your fill using
$(theFill)
and animate from there. I made a codepen example with class attributes and the required css for styling: http://codepen.io/prythm/pen/Lwoyd
I have this page:
http://beta.amitai-clinic.com/
If you hover the top left logo, it should 'fade' the same logo with some text underneath it.
Problem is, the logo part is being faded in naturally, but the text beneath it looks like it's being placed in all together, and not faded in 'naturally'.
Any ideas?
From what I saw, your text is written over the image, having a different background on mouseover and I think the problems are caused by that
You could try instead to do something like this:
<div class="sublogo-stress" style=" ">
<img src="/wp-content/themes/SimplePress/images/trans_120x90.png">
<span>test</span>
</div>
You could even set the opacity of span to 0 to make it completely invisible.
The fade effect should work better now.
toggleClass changes opacity to match the opacity of the hover class and than adds the class. but, anyway, the point where you change the class will behave as a sudden appearance of the text. Look here http://jsfiddle.net/eYJym/
You can 'bypass' this effect by fading to 0 where the class should be toggled. Or by placing the invisible layer with the text above the original image, fade it to some opacity and then hide the layer with the original image. It will be much easier to deal with images without transparency :)
i currently have a scrolling background in one small area of my website and i am trying to have the image fade out as it gets to the sides of the view box. so when the image enters the viewing area it gets opacity and then becomes fully opaque as it comes into the center and then fades out again as it hits the other edge of the view box. I have tried applying gradients with opacity but had no luck and have also tried placing a box with opacity over the viewing area so that when the image scrolls into the area it would change opacity but neither of these things worked.
i am using one image as the background but adding it into the scroller twice so that it can loop and look like it is never ending
any ideas on how to do this?
for the scrolling background i am using the jquery smooth div scroll plugin
edit: here is some of the code i tried
my original scrolling elements... self explanatory
<div id='cloud-viewer'>
<div class='scrollWrapper'> //view box
<div id='cloud-wrapper' class='scrollableArea'> //scrolling in here
<div id='clouds-1' class='clouds'></div>
<div id='clouds-2' class='clouds'></div>
</div>
</div>
</div>
i have tried to put an element with opacity in the code a few ways as seen below
<div id='cloud-viewer'>
<div id='opaque'></div> //this had css to keep it in pos and opacity
<div class='scrollWrapper'>
<div id='opaque'></div> //this gets scrolled...
<div id='cloud-wrapper' class='scrollableArea'>
<div id='clouds-1' class='clouds'></div>
<div id='clouds-2' class='clouds'></div>
</div>
</div>
</div>
I would make 2 transparent PNG images that fade (with a gradient) from the background color of your website to transparent. The first one would be for the left side (bg color to transparent) and the second would be a horizontally flipped version of the first (transparent to bg color). Just absolutely position these two images on top of the left/right sides of the scrollable area and allow for the image to slide behind it. If your viewable area is a fixed size, you could also do this with one large image. Make sense?
If you look at this site for example (not mine): http://www.pauljnoble.com/photos, it does what I think you're looking for. And here's the overlay image they're using: http://www.pauljnoble.com/img/bg/photos-shadow-3.png.
I have a menu bar with hover effects, and now I want to place a transparent image with a circle and a "handdrawn" text over one of the menu items. If I use absolute positioning to place the overlay image above the menu item, the user will not be able to click the button and the hover effect will not work.
Is there any way to somehow disable mouse interaction with this overlay image so that the menu will keep on working just as before even though it's beneath an image?
Edit:
Because the menu was generated with Joomla I could not tweak just one of the menu items. And even if I could, I did not feel a Javascript solution was appropriate. So in the end I "marked" the menu item with an arrow outside the menu-item element. Not as nice as I had wanted it to be, but it worked out okey anyway.
The best solution I've found is with CSS Styling:
#reflection_overlay {
background-image:url(../img/reflection.png);
background-repeat:no-repeat;
width: 195px;
pointer-events:none;
}
pointer-events attribute works pretty good and is simple.
So I did this and it works in Firefox 3.5 on Windows XP. It shows a box with some text, an image overlay, and a transparent div above that intercepts all clicks.
<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>
What I've done:
I've crafted a div and sized it to be what a menu option could be sized to, 100x40px (an arbitrary value, but it helps with illustrating the sample).
The div has an image overlay, and a link overlay. The link contains a div sized to be the same as the 'menuOption' div. This way a user click is captured across the whole box.
You will need to provide your own image when testing. :)
Caveat:
If you expect your menu button to respond to the user interaction (for example, changing color to simulate a button), then you will need extra code attached to the javascript you will invoke on the tag, this extra code could address the 'menuOption' element through the DOM and change it's color.
Also, there is no other way I know of that you can take a click event, and have it register on an element underneath a visible page element. I've tried this as well this summer, and found no other solution but this.
Hope this helps.
PS:
The writeup on events at quirksmode went a long way to help me understand how events behave in browsers.
Give the button a higher z-index property than the hand-drawn image:
<img src="hand_drawn_image.gif" style="z-index: 4">
however, make sure you test it in all major browsers. IE interprets z-index differently from FF.
For somebody to come up with more details, you would have to post more info, a link would be best.
Building on what Pekka Gaiser said, I think the following will work. Taking his example and reworking it:
<a href="#" style="z-index: 5">
<!-- Place image inside of you menu bar link -->
<img src="hand_drawn_image.gif" style="z-index: 4">
<!-- Your link here -->
</a>
Here you should be able to place an event on the underlying a-tag and, unless your image has an event, initiates a capture (!IE browsers) and then kills propagation of the event.
If you need a bit more help, let us know a bit more about the situation.
If the image will be statically positioned, you can capture the click event from the image as it bubbles up, by placing the img tag inside the menu item element.
<div onclick="menuclick()">
<img src="overlay.png" style="position:absolute;" />
</div>