# Can Pinegrow change a foreground image when you hover over it,

**URL:** <https://forum.pinegrow.com/t/can-pinegrow-change-a-foreground-image-when-you-hover-over-it/2075>\
**Category:** General\
**Created:** [July 20, 2018, 11:08am UTC](https://forum.pinegrow.com/t/can-pinegrow-change-a-foreground-image-when-you-hover-over-it/2075 "2018-07-20T11:08:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ro6](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/ro6/32/1306_2.png) [@Ro6](https://forum.pinegrow.com/u/Ro6)\
**Post date:** [July 20, 2018, 11:08am UTC](https://forum.pinegrow.com/t/can-pinegrow-change-a-foreground-image-when-you-hover-over-it/2075/1 "2018-07-20T11:08:45Z")

</div>

I’m sure it must be able to do this, but I can’t find out how.

I have an image, centered in a BS4 column. I want a different image to be shown when I hover over it.

Such a common thing… Do I need to write my own code for this?

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [July 23, 2018, 7:36am UTC](https://forum.pinegrow.com/t/can-pinegrow-change-a-foreground-image-when-you-hover-over-it/2075/2 "2018-07-23T07:36:50Z")

</div>

You would at least need to write some CSS code. The simplest way to do this is by making the image the background of the column, and then use the CSS pseudo hover class to change the image. It might look something like this.

First, delete the image from your column. Then, add the following CSS to your Custom style sheet…

```auto
background-image: url(http://pinegrow.com/placeholders/img12.jpg);
background-repeat: no-repeat;
background-size: cover;
width: 400px;
height: 400px;
}

.bgimage:hover {
background-image: url(http://pinegrow.com/placeholders/img13.jpg);
}

```

Then, you can click on your column either in the workspace or the tree view, go to the properties panel, click add class and type “bgimage”. You should see the custom class we created in your custom style sheet show up. Click it to apply it to your column, and you should see a stock image appear. The image is being called from Pinegrow’s website. When you mouse-over, it should change.

To use your own image, you would change the information in the parenthesis after the url to point to wherever your image is in your project, for example… _url(images/yourimage.jpg)_ The size of the image is determined by the width and height styles in the CSS (in this example, 400px by 400px) you can change them to whatever you want. You can even add a line to the CSS .bgimage class like transition: background .3s; to give it a little fade effect.

Without using CSS, to change an actual placed image when you mouseover it would require some javascript.