css greyscale hover
- Started
- Last post
- 22 Responses
- forcetwelve
anyone have a good method for making images go from greyscale to colour on rollover?
i've found this one but i can't work out where to put that last jquery script at the bottom?
- dbloc0
That one actually looks nice.
- acrossthesea0
Put that last jquery script in your <head> area
View the source of this: http://www.sohtanaka.com/web-des…
- forcetwelve0
ah ok - thanks. i'm using wordpress so i'm assuming it goes in the header file?
- forcetwelve0
can't work it out in wordpress.
i have posts as thumbnails which i'm trying to put the effect on. so it's not a list as such.
- Mishga0
that last piece of code?
$(document).ready(function() {$("ul.gallery li").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag - Set position to bottom
$(this).find("a.thumb").css({'ba... : 'url(' + thumbOver + ') no-repeat center bottom'});//Animate the image to 0 opacity (fade it out)
$(this).find("span").stop().fade... 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to full opacity
$(this).find("span").stop().fade... 1).show();
});});
- yeah that's it. i want the effect to happen on the images inside a div called #projectforcetwelve
- acrossthesea0
Yeah it probably can go in your header template file.
You either have to modify the jQuery stuff to match your markup, or modify your markup to match the example page. Maybe there's some WP specific solution. I'm not a WP guy.
- dbloc0
probably a path issue.
- ********0
Yeah..goes in the header..make sure you enclose it in the right element: <script type="text/javascript"> </script>
And you are including the library correct?
- forcetwelve0
what do you mean by the library?
- acescence0
as long as jquery is sourced properly in the head of the page, it doesn't matter where the thing in (document).ready goes. in fact you can have several of them in different locations and they should all work. the only potential issue is if you're using jquery in no conflict mode and the dollar sign is being used by another library.
what i suggest is copy and paste the source to your page so you have a static page to work with, get the jquery stuff in and working, then go back to your templates and figure out where the bits need to go.
- forcetwelve0
i've got all the code in there. just can't figure out how to apply it to the #project div rollovers.
- acescence0
it's using an unordered list with an img inside a span inside an anchor inside an li. if you change any of that markup, you have to change the script to target the proper elements
- johfiner0
post a link to your site where you've started to apply the script... it'll be much easier that way
- forcetwelve0
it's on a local machine - so can't post it. it's the same as what is in the demo though.
- ********0
first of:is wp calling jquery properly?
make a test in the wp header:
<script>
jQuery(function(){
alert("it's working")
})
</script>
- forcetwelve0
that works
- ok so check ascescence post********
- http://www.qbn.com/t…********
- ok so check ascescence post
- forcetwelve0
i can follw the markup to a point - until it gets to the background image bit- as i don't have background images in the posts. all i have is the #project div with the images in that. i'm lost.
<script type="text/javascript">
$(document).ready(function() {
$("#project").hover(function() { //On hover...
var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
//Set a background image(thumbOver) on the <a> tag
$(this).find("a.thumb").css({'ba... : 'url(' + thumbOver + ') no-repeat center bottom'});
//Fade the image to 0
$(this).find("span").stop().fade... 0 , function() {
$(this).hide() //Hide the image after fade
});
} , function() { //on hover out...
//Fade the image to 1
$(this).find("span").stop().fade... 1).show();
});});
</script>
- if you have the div with the img's inside, then you need <a> links with a class of "thumb", doesnt semm that hard..********
- hard but you should post the html markup + the script on a link we can help you better********
- if you have the div with the img's inside, then you need <a> links with a class of "thumb", doesnt semm that hard..