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

General
1

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?

2

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…

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.

2 Likes