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 :)
Related
Very simply, I'm trying to fade in the background-image of a div; I've seen this done with two divs and effectively revealing (i.e.: faux fading in) the background-image by fading out the background-color of a div covering the background-image. This will not solve my problem.
The above mentioned solution works if the "mask" is the same solid color as the body background-color. In my case, the body's background is a textured image, so this will not work. I could set the "mask" div to have the same background-image as the body, but having a z-indexed div seems like overkill.
tl;dr I have a div somewhere in the body--how do I fade in its background-image? Thanks!
You need two divs. The first one has no background color and the second one has a background image. Fade the second one (Asherlc proposed a way) and you're done.
.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...
<div>
<div class=toFade style="background-image:url(img.png)">
<!-- possible content -->
</div>
</div>
Not possible as far as I know. You will need 2 images / elements to do this. You could use jquery / jquery ui's toggleClass with a duration.
See examples here:
How to add a fadeIn effect while changing background image using .css in Jquery
jQuery li with image fade in background (fade in class)
Ok!
It took me some time to solve this kind of "Challenge" and I think I came up with an idea close to your request!
Despite the fact that you want to FadeIn only your background-image with only one div I made a jQuery script using
clone() method.
The only thing that has a little work to do is if you want to fade In some text as well!
Take a look of my script and let me know if it helped!
http://jsfiddle.net/7z8vB/
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 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
Hi all you wonderfully helpful people!
I was practicing my CSS skills, and I thought I would push my CSS to the limit and animate some <div>s. Well the CSS has failed me and I'm wondering if there's a an easy way to achieve the effect I describe below using javascript.
<div id="container">
//on hover div with background img expands in every direction from center acting as border
<div id="expanding-background">
<div id="img-div"> //border's solid-color stroke increases, but size remains same
<img>
</div>
</div>
//label sits at bottom and drops down as expanding-background expands down.
<p id="label" style="text-align:centered;">Label</p>
</div>
With the CSS, I jerry-rigged a solution, but it only worked when I hovered the inner img, so mouseovering the border only made the expanding-background div work. Similar issues occurred with the label's animation. Is there an easy way to initiate animation of a number of divs with the hover of a single div?
Thanks in advance helpful people!
$('#yourdiv').bind('hover', function() {
// Animations to do when hovering. Example:
#(this).find('#innerDiv').animate('height', '+=200');
}, function() {
// Animations to do when leaving with the mouse. Example:
#(this).find('#innerDiv').animate('height', '-=200');
});
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
http://www.karenmillen.com/
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
Would the .slideDown() method work?
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();
after that use $("#div_Id").slideDown('slow');
this will work
Check out slideToggle
Here's what i have so far:
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
In order to use the animate() function add a CSS class to the <div> tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.