Jump to content

Change image when hovering over box image

Recommended Posts


I was reading this forum and I noticed that the same solution might apply to my customization with different syntax: http://www.pagelines.com/forum/topic/26630-text-color-change-when-hovering-over/


I want to have my boxes [section, part of the core framework] images (or media as you call it) change when you hover over them with another image. For example if the image is a simple b&w lightbulb then when you hover over it it would look like a yellow lightbulb (because there is an image of a yellow lightbulb saved on my website that I can call). So what I need is a class that calls this other image when the mouse hovers over the original image saved as. Also there is a field in the box set-up options that is called "Boxes Custom Class" so I am assuming I would simply place the code in that text box. Oh, and I need to make sure that the image hyperlink ("Box Link (Optional)" field) still works. 


Any ideas, inputs are greatly appreciated.






Share this post

Link to post
Share on other sites


I do not believe you can use sprites (image hover changes) in Boxes because the image doesn't let you insert code, and it's very difficult to identify a specific box identifier.  However, there's an option.


Visit http://demo.pagelines.me/tools/ and wait a moment for that large page to load. Then click on Grid System. Use the grid in place of your boxes.


See http://www.w3schools.com/css/css_image_sprites.asp  to learn more about Sprites.


Another option would be to use the WP Boxer plugin, which does uniquely identify each content block (like boxes).

Former PageLines Moderator, Food Expert and Raconteur

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

  • Similar Content

    • 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 ?
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
      For the life of me I cannot figure it out.
    • micstepl
      By micstepl+
      Feature request / state of the art idea
      Could you add to any Extension
      where there is an "Image" available  (eg. box Image, Image, etc.) and a "link" ist added >>> a HOVER funktionality <<<< This allows than the user to
      add an image (taking the same properes from the original / no changes allowed) advanced you could add a "transition"  and/or  "opacy"
    • amb62137
      By amb62137
      Hi there,
      I am trying to change an image on hover using either MediaBox or TextBox. The image is manually inserted using the HTML box. 
    • kellid
      By kellid
      Looking for some help with Masonic Gallery.  As it is now, the post title shows only when hovered over.  How can I have it where the title show over the image continuously while the image has either a lowered opacity or greyscale and as you hover over, the title's opacity changes while the background image resumes to full color?  Hope that makes sense.  Don't have any examples on hand but I could find one!  
      Thanks so much!