Title: Changing Background/image on Hover
Last modified: August 30, 2016

---

# Changing Background/image on Hover

 *  Resolved [TheRuniversity](https://wordpress.org/support/users/theruniversity/)
 * (@theruniversity)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/)
 * Hi Tobias,
 * I would love your input on how to have the image change on hover. n example can
   be found here: [http://runwaterloo.com/](http://runwaterloo.com/)
 * I have been able to change the background image but cannot figure out how to 
   ONLY do it on hover. Any help would be greatly appreciated.
 * Cheers,
 * [https://wordpress.org/plugins/tablepress/](https://wordpress.org/plugins/tablepress/)

Viewing 6 replies - 1 through 6 (of 6 total)

 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682220)
 * Hi,
 * thanks for your question, and sorry for the trouble.
 * I just checked your site, but unfortunately, I’m not really sure what you mean.
   Can you please explain where I can find the table and what you want to change
   there?
 * Regards,
    Tobias
 *  Thread Starter [TheRuniversity](https://wordpress.org/support/users/theruniversity/)
 * (@theruniversity)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682283)
 * Great plugin by the way! Here is the page with my table: [Table](http://theruniversity.com/calendar/)
 * I was able to add a background image using:
 *     ```
       .tablepress-id-3 tbody td {
       	font-family: Tahoma;
       	font-size: 18px;
       	color: #ffffff;
       }
   
       .tablepress-id-43 .row-1 .column-1 {
       	background-image: url(IMAGE-URL);
       }
       ```
   
 * However, I am trying to have it only show the background image on hover which
   can be seen at [RunWaterloo.com](http://runwaterloo.com/).
 * Thank you again.
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [10 years, 5 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682285)
 * Hi,
 * then you’d simply have to use
 *     ```
       .tablepress-id-43 .row-1 .column-1:hover {
       	background-image: url(IMAGE-URL);
       }
       ```
   
 * Regards,
    Tobias
 *  Thread Starter [TheRuniversity](https://wordpress.org/support/users/theruniversity/)
 * (@theruniversity)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682447)
 * Thank you, Tobias.
 * I am able to get the background image to come up on hover but cannot get the 
   original image to disappear. Here is the code:
 *     ```
       .tablepress-id-3 .row-1 .column-3:hover {
       	background-image: url(http://theruniversity.com/wp-content/uploads/2015/12/Beer_mile_tile_bg_v2.jpg);
       	background-size: 100% 100%;
       	background-repeat: no-repeat;
       }
   
       .tablepress-id-3 .row-1 .column-4:hover {
       	background-image: url(http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg);
       	background-size: 100%;
       	background-repeat: no-repeat;
       }
   
       .tablepress-id-3 .row-1 .column-5:hover {
       	background-image: url(http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg);
       	background-size: 100%;
       	background-repeat: no-repeat;
       }
       ```
   
 * I tried doing a z-index and other things- a bit of a newbie at CSS.
 * Link to site: [HERE ](http://theruniversity.com/events/) – [http://theruniversity.com/events/](http://theruniversity.com/events/)
 * Just donated and hope you can help!
 * Thanks again.
 *  Thread Starter [TheRuniversity](https://wordpress.org/support/users/theruniversity/)
 * (@theruniversity)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682448)
 * Hi Tobias,
 * Not sure if a previous post went through:
 * I am able to get the background image to pop up perfectly but cannot get the 
   original to disappear. Here is the code I am using:
 * ‘.tablepress-id-3 .row-1 .column-2:hover {
    background-image: url([http://theruniversity.com/wp-content/uploads/2015/12/Beer_mile_tile_v2.jpg](http://theruniversity.com/wp-content/uploads/2015/12/Beer_mile_tile_v2.jpg));
   background-size: 100% 100%; background-repeat: no-repeat; opacity: .4; }
 * .tablepress-id-3 .row-1 .column-3:hover {
    background-image: url([http://theruniversity.com/wp-content/uploads/2015/12/Beer_mile_tile_bg_v2.jpg](http://theruniversity.com/wp-content/uploads/2015/12/Beer_mile_tile_bg_v2.jpg));
   background-size: 100% 100%; background-repeat: no-repeat; }
 * .tablepress-id-3 .row-1 .column-4:hover {
    background-image: url([http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg](http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg));
   background-size: 100%; background-repeat: no-repeat; }
 * .tablepress-id-3 .row-1 .column-5:hover {
    background-image: url([http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg](http://theruniversity.com/wp-content/uploads/2015/12/turkey-running_v2.jpg));
   background-size: 100%; background-repeat: no-repeat; }’
 * Do I have to do a z-index or something? I am a newbies to CSS unfortunately.
 * Any help would be awesome! (send over a donation for what it’s worth)
 *  Plugin Author [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * (@tobiasbg)
 * [10 years, 2 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682453)
 * Hi,
 * Sorry for the long wait for a reply. As a I was on a long vacation without internet
   access the last couple weeks, I could not reply earlier.
 * From what I can see, you are no longer using a table on that page?
 * Regards,
    Tobias

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Changing Background/image on Hover’ is closed to new replies.

 * ![](https://ps.w.org/tablepress/assets/icon.svg?rev=3192944)
 * [TablePress - Tables in WordPress made easy](https://wordpress.org/plugins/tablepress/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/tablepress/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/tablepress/)
 * [Active Topics](https://wordpress.org/support/plugin/tablepress/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/tablepress/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/tablepress/reviews/)

## Tags

 * [background](https://wordpress.org/support/topic-tag/background/)
 * [hover](https://wordpress.org/support/topic-tag/hover/)

 * 6 replies
 * 2 participants
 * Last reply from: [Tobias Bäthge](https://wordpress.org/support/users/tobiasbg/)
 * Last activity: [10 years, 2 months ago](https://wordpress.org/support/topic/changing-backgroundimage-on-hover/#post-6682453)
 * Status: resolved