Jump to content


Photo
- - - - -

Hover Effect on Boxes

boxes

  • Please log in to reply
6 replies to this topic

#1 nicoleisthenewblack

nicoleisthenewblack

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 08 January 2014 - 06:13 PM

I am currently using Pagelines version 2.4.4 along with the latest version of Wordpress.

 

My site is nicoleisthenewblack.com

 

I would like the three images in my header that are currently in boxes to change upon hover. the image would be a colored background with text descripting the catergory page it leads to.

 

Is this possible with CSS with the current version of pagelines?

I have no desire to upgrade to DMS.

 

I put this in the custom code section and nothing happened, I even tried to just put a simple border around the box to make sure I wasdoing it correctly and nothing happened. Can someone point me in the right direction

 

Please Login or Register to see this Hidden Content

 

Thank you



#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 January 2014 - 11:51 PM

Hi Nicole

 

Yes this will be possible with css, however you'll need to put the id of the box on your site in place of 4950. Each box will have it's own id. If you're planning on all the boxes reacting the same, then just put .fbox

 

#fbox:hover {
background-image: url('*url of image*');
}

 

That code will change the background image on hover. If you want to change the color, replace the hex value with your color of choice. 

 

#fbox:hover {
background-color: #000000;
}



#3 nicoleisthenewblack

nicoleisthenewblack

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 January 2014 - 03:49 AM

hi james thanks for your help

its not working for me and i am not sure why.

 

i just did something really simple to check if was using the right syntax and identifying the right thing and i placed this

 

Please Login or Register to see this Hidden Content

 

in my custom code and nothing happens when roll over with the mouse. i checked in firefox and in chrome.

 

what could i be doing wrong? do i have to somehow make the image "invisible" to see the background or something



#4 nicoleisthenewblack

nicoleisthenewblack

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 09 January 2014 - 03:51 AM

also it looks like on my custom css page it just keeps displaying "saving..." is this a known issue

 

you know what, i dont think any of my css is being applied

im trying simple changes and nothing works

and the changes that i implimented before my upgrade arent working

 

thoughts?



#5 Danny

Danny

    Is Awesome!

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

Posted 09 January 2014 - 09:51 AM

OK, this isn't going to happen with CSS unfortunately, as far as I am aware. Because your image is using the src attribute, so using CSS:hover will only add it behind the HTML added image.

 

You will need to either use jquery to change the image or remove the uploaded image from your box and then target the box and add the image with CSS, then replace the image using CSS:hover.

 

For more information on the jquery option see here - 

Please Login or Register to see this Hidden Content



#6 nicoleisthenewblack

nicoleisthenewblack

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 11 January 2014 - 05:38 AM

@

Please Login or Register to see this Hidden Content

 

do i need to start a new topic for my css not saving issue?

 

when i try to impliment changes on the custom css screen all i see is "saving...." and it never stops.

 

is this a known issue?

 

im just trying simple things like change the position of my .mainlogo-link img it works in firebug but nothing is working.

 

i update was there something i missed?



#7 Danny

Danny

    Is Awesome!

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

Posted 12 January 2014 - 01:45 PM

If you're encounter a Saving that never ends, this is most likely caused by a plugin, I recommend you disable all active plugins and see if the saving issue persists, which it shouldn't.

 

In regards to your CSS working in Firebug, but not in your custom CSS. This is most likely because you haven't used one of the PageLines prefixes to guarantee your CSS will override the default CSS.

 

See our PageLines Framework custom CSS documentation for more information - 

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: boxes