Custom button with mouse hover

I created three custom buttons with the rounded image bric and a custom image with text on it.

Now I want to change the background color of the buttons on mouse-over. I created a class with a second image with different background color on on hover but it doesn’t work. If I re-open the class the image I inserted on hover is gone, maybe a bug? @Norm

What am I missing here?

Could be, what version of Blocs?

version 2.3.1 I believe it’s the latest?

on further inspection I don’t see the image in the little thumbnail viewer when reopening the class but when I hover over the thumbnail image viewer it still shows me the image name

besides from that it’s still not working, am I doing something wrong?

I just did a test with the latest beta and its all working for me. Are you sure your images are not transparent or a shade of black as that would’nt show up.

I tried with different images, can’t get it to work.

other stuff like resizing the image on mouse over works

Okay, so I created a simple test document with one block holding three images, added a class to one of them and tried to add an image on hover, unfortunately no luck, same thing happens, the little thumbnail image even disappears when I switch from normal to hover in the class editor.

I noticed also that I can’t add different images for normal, hover and active, it will show the last image name I added when I hover the little thumbnail viewer for all three states, also the little cross for deleting the image is gone

I’m running om Yosemite 10.10.5

@Norm: just tried with the latest beta, same thing, but:

after I add a class with an image on hover, now when I hover over the image where it’s set in the website it gives me a little rond double arrow icon suggesting it can’t find the image that is supposed to be shown on mouse over?

Are you trying to replace an image html object with a class? Thats not possible in html, if its an actual image object. I thought you were using an button bric with an image background.

Images have their value set by the src attribute, this cant be changed with classes, you need to do that with javascript. try to use a button bric for buttons and image bric for images.

I used an image bric to start with, the image I use is just a simple png file with a plain color background with text on it so it looks like a button. what I want to acheive is a big round button, more like a ball, that changes background color if you hover on it. There’s now way to do that with a button bric because it’s just not big enough and hasn’t the right shape

Use a button and Add more padding and increase the border radius.

1 Like