Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Show image on button hover


  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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!


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...