Create hover image button

Support
#1

Hi there

I’d love to create a button like this:
normal state: image 1
hover state: image 2
this should then link to another page.

I’ve looked through a few threads and have followed the advice:

I’ve added this code to the custom CSS of the page:

a.x-img.bottom-img-1 {
background: url(http://gwendiklisa.com/wp-content/uploads/2017/08/Screen-Shot-2017-08-04-at-18.00.27.png) no-repeat center top;
background-size: contain;
transition: 0.25s all ease-in-out;
}

a.x-img.bottom-img-1:hover img {
opacity: 0;
transition: 0.25s all ease-in-out;
}

a.x-img[class*=“bottom-img”] img {
transition: 0.25s all ease-in-out;
}

And then I’ve added the class to that image I want to hover
bottom-img-1

But nothing happened… I’d really appreciate if you could check what I’ve been doing wrong…

Change of image on hover
#2

Hi there,

Kindly consider that this is a customization request and the codes we suggest is mere to help you around with the request and we do not support it for the future releases or any problems that the code may have or break in the future.

Please kindly add a button element using the Cornerstone and in the class element of the button options add: with-img

Then kindly add the code below to X > Launch > Options > CSS:

.with-img {
  background: url('MAIN IMAGE URL') no-repeat center center;
  background-size: cover;
}

.with-img:hover {
  background-image: url('HOVER IMAGE URL');
}

Substitute image links with what you have on your server.

Hope it helps.

#3

You’re a legend, Christopher. Thank you so much. Your elegant solution worked. Have a lovely day.

For others reading this: I had to adjust the button size to match my image. This is the code I added to the page’s custom CSS

with-img {
width: 153px;
height: 153px;
padding-top: 60px;
border: 0px;
font-size: 100%;
}

#4

Glad to be of a help :slight_smile: