After surfing through hundreds of cool NFT websites, checking them out and adding the NFT drops as we’ve been doing for the past year here at Non-Fungi, we come across many very impressive websites, with all kinds of animation, scrolling effects, accordion boxes, timelines and so on. One of the features or effects that a lot of the drops use is to hover a pfp or land parcel image, up and down. This brings an element of life to the page.

I’ve tried to emulate this effect to some degree of success here in WordPress, and below you will find the code I’ve used with instructions.

In the appearance > customize > additional css, I’ve added a class called .bounce you can adjust the values to float up, down and sideways and change the speed

.bounce {
    position:relative;
    -webkit-animation:glide 1s ease-in-out alternate infinite;
    transition: all 0.7s ease-in-out;
 }


@-webkit-keyframes glide  {
    from {
       left:0px;
       top:0px;
    }
    
    to {
       left:0px;
       top:8px;
    }
 
 }

Now to apply this CSS to the specific image (or div in this case) you’d like to hover, using the Gutenberg blocks, scroll down to the Additional CSS class(es) and add ‘bounce’ to the class of the block. By switching the view to ‘Edit as HTML’ from the three dots drop down (options) menu, you can see what’s going on behind the wysiwyg. Here is the code of the block I used.

<div class="wp-block-image bounce"><figure class="aligncenter"><img src="https://www.non-fungi.com/wp-content/uploads/2022/05/NFTapp.png" alt="" class="wp-image-56849"/></figure></div>

That’s it! As you can see the .bounce class has been added to the div tag, so this is acually hovering the whole div. It could probably be targeted even more to the specific image, but as this seems to work fine, why fix it if it isn’t broken? The hovering effect seems to work ok in Firefox, Brave and Chrome browsers. Thanks for reading, and get your bounce on!