Jump to content

Archived

This topic is now archived and is closed to further replies.

lroberts00

Hover over Boxes

Recommended Posts

lroberts00    3
lroberts00

Is there a way when you hover over boxes that it can change to gray scale?  or at least something else noticeable?

 

For example, this photography site homepage....when you hover over the boxes of pictures, I want them to turn to gray scale.

 

www.mandyfiock.com

 

Any suggestions?

 

Thanks!

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello lroberts00

 

You can do this using CSS. There are quite a few posts regarding this around the web. One i have used before is here http://stackoverflow.com/questions/16122607/make-an-image-turn-black-and-white-on-hover 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

Martin Davies Thank you so much for the VERY quick reply. 

 

I added:

img:hover {  
  filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
  filter: gray; /* IE5+ */
  -webkit-filter: grayscale(1); /* Webkit Nightlies & Chrome Canary */

}

 

and now it is disappearing when i hover over them?

 

Also, is there a way to only apply to the boxes?

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Hello lroberts00 

 

Do you have a link to a page where you are implementing this? 

 

When you apply CSS to a particular area or section you need to pinpoint the selector so that it is just applied to the area you want it to affect. Does this make sense? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

www.mandyfiock.com

 

Yes, that makes sense, could you help me apply it to the boxes?  I really appreciate it.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

In order ot understand CSS customisation and customisation methods properly, please see the following documents. 

 

For methods to use when implementing Custom CSS & scripts http://support.pagelines.me/docs/customization/customization-methods/

 

and for using Custom CSS http://support.pagelines.me/docs/customization/custom-css/

 

Use firebug or your browser inspection tools to highlight the CSS selectors and isolate the correct CSS code. 

 

All that being said - looks like you have got it spot on http://screencast.com/t/gvxGgkpP 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

I see you are using safari - mine is in chrome but have tested safari too and it doesn't seem to disappear. Also now the photos are different did you manage to resolve this? 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

my mistake - let me take a look 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Different browsers handle CSS differently. Firefox doesn't support this hover CSS in the same way that other browsers do.. 

 

So.. You will need to add CSS for just the Firefox users - more information regarding Greyscale and Firefox can be found here http://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

I've given up, tried each one, nothing worked.

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Don't give up. i will take a look at your code if you can put it back on your site. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

Its back on there. I'm frustrated, thanks for your help.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Remove the code you have for your hover and replace it with this:

 

filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */

 

Please be aware we are not a CSS help forum, if you have CSS issues, we recommend you sign up to a CSS help forum. Fore more information on the code I provided above, see here - http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

Thank you very much for your reply and help.  This is not work either in firefox. 

 

I realize you cannot help every CSS question that comes across the forum and I appreciate the links to help me so far as well as other times I've needed assistance, Pagelines has gone above and beyond to help me.  I understand if you chose not to see go any further in assisting me.  Thank you!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

I tested the code before I posted, that code does work.

 

Can you post the code you used please.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00
img.grayscale{
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Try this:

 

#site .fbox:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Is the code still active on your site now ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Remove that code I gave you and try this:

 

#site .fbox img:hover {
filter: grayscale(100%);
-webkit-filter: grayscale(100%); /* For Webkit browsers */
filter: gray; /* For IE 6 - 9 */
-webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

No, still disappears.  Thanks for your help.  I guess, if it can just be working on other browsers, we could do something different for firefox.

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi lroberts00 - Not to beat a dead horse but I was able to get the kind of hover you're looking for working in FF on the carousel at http://myuntangledmedia.com/portfolio/ with the following applied to the img on hover:

 

{filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

 

May be worth one last try...


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
lroberts00    3
lroberts00

Jake thank so much for the reply, and I don't want to give up on this, because my client really really wants it.  But, what am I doing wrong?  I've applied your code, and still the images disappear in Firefox?

 

www.mandfiock.com

 

attached picture to see

Share this post


Link to post
Share on other sites

  • Similar Content

    • Audun MB
      By Audun MB+

      Here:http://attac.no/global-ulikhet/
      The images are forced into a boxed frame so that you can't see the whole picture. Doesn't look so good. Is this a bug? A feature? How can I fix it?
    • JudithKlinger
      By JudithKlinger+
      The recent WP update seems to be quite cheeky...messing about with a number of things. 
       
      Having trouble with boxes displaying differently in different browsers.  1st screen shot is Chrom...looks ok. 
      2nd screenshot is Firefox...colors are different. Icons are different. Have weird 1000's next to the icons. Any idea what's going on? 
       
      Thanks!! 
      Judith
       
       


    • richardjacruz
      By richardjacruz+
      Someone reported this little bit of weirdness to me today. They were using Internet Exporer. I used an emulator, and I received the same result. Please see the attached.
      The website is richcruzchicago.com.
      Thanks,
      Rich

    • Susan
      By Susan+
      Everything was fine with my site.
      Suddenly, strange characters are appearing in Boxes. See image. Site page is here. I even tried to add a new Boxes section but the same thing keeps happening, so I deleted the new section.
      How can I resolve this?
      Your help is greatly appreciated.
      Thank you.
       
       

    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
×