Jump to content


Photo
- - - - -

Hover over Boxes

boxes hover

  • Please log in to reply
39 replies to this topic

#1 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 04:19 PM

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!



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 04:23 PM

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 

Please Login or Register to see this Hidden Content

 



#3 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 04:32 PM

@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?



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 04:34 PM

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? 



#5 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 04:36 PM

www.mandyfiock.com

 

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



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 04:54 PM

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

 

For methods to use when implementing Custom CSS & scripts

Please Login or Register to see this Hidden Content

 

and for using Custom CSS 

Please Login or Register to see this Hidden Content

 

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 

Please Login or Register to see this Hidden Content

 



#7 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 04:59 PM

Hmm...yours is working, mine disappears?

Attached Files



#8 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 05:11 PM

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? 



#9 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 05:12 PM

I am in firefox.  It is still doing it?



#10 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 05:13 PM

my mistake - let me take a look 



#11 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 05:18 PM

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 

Please Login or Register to see this Hidden Content



#12 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 05:30 PM

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



#13 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 14 September 2013 - 07:09 PM

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



#14 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 14 September 2013 - 07:43 PM

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



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 15653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 September 2013 - 09:09 AM

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

 

Please Login or Register to see this Hidden Content

 

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 - 

Please Login or Register to see this Hidden Content



#16 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 September 2013 - 08:22 PM

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!



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 15653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 September 2013 - 08:33 PM

Hi,

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

 

Can you post the code you used please.



#18 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 September 2013 - 08:38 PM

Please Login or Register to see this Hidden Content

Attached Files



#19 Danny

Danny

    Is Awesome!

  • Moderators
  • 15653 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 September 2013 - 08:46 PM

Try this:

 

Please Login or Register to see this Hidden Content



#20 lroberts00

lroberts00

    Advanced Member

  • Members

  • 60 posts
  • Framework Version:2.4.1
  • Country: Country Flag

Posted 15 September 2013 - 08:55 PM

It makes the picture disappear.

Attached Files







Also tagged with one or more of these keywords: boxes, hover