• 0

Hover over Boxes


Question

Posted · Report post

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

39 answers to this question

  • 0

Posted · Report post

Jake, well, thank you so much! 

 

I missed a "y" in the url.  It is:   www.mandyfiock.com

 

Thanks a million for your help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No worries lroberts00 - let me do some poking around and I'll report back with questions or (hopefully) answers. One thing I did find straight away, do you happen to be hosting on GoDaddy? - http://stackoverflow.com/questions/11433628/svg-filter-not-working-on-ff-with-godaddy

 

Also - have you already tried dropping the code in the style.css itself as opposed to the custom code section in the visual editor?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, I have hosting with hosting24.com.

 

I have not tried the style.css but I will. I'll let you know.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Keep us posted about your progress.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi all, Im having a similar problem but I actually want to change the image to a different image upon hover.

Can I do that to a box..with css? Perhaps I am trying to change the wrong thing.

For instance on my site

nicoleisthenewblack.com

 

I have three boxes in the header and upon hover i want each picture to change to an image with text and a colored background that is semi transparent.

 

i have the box ID

and i tried this and other things but nothing is working, any ideas

 

 

#fbox_4950:hover {
background-image: url('*url of replacement image*')
}

 

i've tried img src and content as well

 

any hints

 

HELP!! :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

nicoleisthenewblack - This topic is related to the iBoxes section in DMS. You're using PageLines Framework and a very old version at that. I recommend you first update to the latest version of PageLines Framework 2.4.4 (your version is 2.1.3) or upgrade to DMS, as iBoxes is a DMS only section.

 

Once you have updated your PageLines Framework, please create a new topic in the PageLines Framework forum, then we will be able to assist you. If you have upgraded to DMS, then reply here letting us and we can try and assist you with the changing of images upon hover. If you use the iBoxes section that is.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I am not using DMS either, Im using Pagelines Framework.  Is that why I've still not been able to make it work in firefox?

 

http://www.mandyfiock.com/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

lroberts00 Please could you confirm for me, are you just trying to replicate the hover & fade to grey effect on your site in Firefox? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Correct.  I'm just trying to make the picture gray scale when hoovering.  It works with Chrome.  Just now with firefox.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

A little bit of googling turns out that the Grayscale filter property does not work with Firefox as it does with other browsers. Different browsers handle css differently and Firefox is no exception. The issue you are seeing is with the CSS and the browser and not a limitation of the Framework or Wordpress. 

 

There is an article here with alternative method detailed that it might be worth trying http://stackoverflow.com/questions/16925867/css-filter-grayscale-not-working-in-firefox

 

You will likely need to target the Firefox browser and apply alternative CSS that only has an effect on the site in Firefox. 

 

Information on doing this within the Framework can be found here http://support.pagelines.me/docs/plugins/browser-specific-css/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Martin, will try!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem @lroberts00 

 

Please let us know how you get on - were a little limited what we can do to help with this but can probably take a look if you have issues implementing anything within the Framework 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i dont plan to update the DMS. i just dont have the time to learn something new AND i really can financially invest in an upgrade right now. so i'll update my pagelines framework and open up a post in the appropriate section.

 

thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@nicoleisthenewblack 

 

ok thanks

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now