Show image on button hover

Site URL: https://www.ikhayaspa.com/

I'm looking for CSS code that would show an image on a button when hovered, thus replacing the text.  This would be for just one button on a page with multiple buttons.  Thanks in advance.  

Hello there,

You can achieve this effect by targeting the button on the image block. You'll want to use a block identifier extension to determine which image the effect will be applied too. When I wrote this code for you, I was using an Image Poster block and my default button style is a pill shaped button which is why the border radius is "5em" -- so you may need to adjust this accordingly or remove it entirely.

#Your_Block_ID { 
  a {
  position: relative;
  }
  a:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    border-radius: 5em;
  background: url("Your_URL");
   z-index: 1;
  background-size: cover;
    background-position: center;
  background-repeat: no-repeat;
    transition: all .5s ease;
}
   a:hover:before {
    opacity: 1;
  }
}

The first 4 lines essentially determine that we should be targeting the "a" element inside of the parent Block ID. We then add a "pseudo layer" with an opacity of "0", making the element hidden. To "unhide" the element we use the hover property to change the ":before" layer opacity to "1" .

I would encourage you to play around with the settings in this code and see what happens when you hover on the button, there are a lot of properties, filters, positions, sizes and plenty of other fun stuff to tweak.

Hope this helps!

-Dan

Thanks Dan!  You're a star.  Very clean code too.  Works great!