How to Float an Image Up and Down in WordPress

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!

Big Innovation From OpenSea

New big innovation from OpenSea, Project Seaport, is a marketplace protocol which is now public on GitHub. The new smart contract for marketplaces is open sourced and includes some interesting ‘swap’ potential, bid and offer for multiple tokens and NFTs, ERC721, and 1155. Linking to The Seaport Overview will provide more documentation about implementation. This could be something that OpenSea will roll out onto their own platfrom and, being open source, will be an opportunity for the web3 developer community to fork the git, develop, contribute experiment and build features for their own projects and learn powerful tools, scripts and standards to help define the future of web3 marketplaces.

Web3 Twitter

We’ve been tooling around with the Moralis ethereum boilerplate and also completed a Web3 Twitter full-stack blockchain app. Moralis’ Youtube channel, has many a great video, and this one runs through the whole process from compiling and deploying the contract on remix, and coding the React front end UI. Pretty cool to see the power of Moralis in terms of connecting and storing all the blockchain events, transaction / history and so on for the addresses that connect (like a web3 firebase), and ipfs urls. Definitely learning a lot and excited to do some more of the tutorials including the Unity games…

Thanks to the Moralis team for the nice NFT after submitting the repo and wallet address in their Discord, which has some super helpful members that helped me get it deployed. Feels good to have depolyed a contract to Mumbai, I know I have a lot to learn, but am looking forward to developing some useful projects or services and games or entertainment over the EVM compatible chains and beyond.

Brute Force Attacks

GM haxxors! Currently at about 120 failed login attempts today and counting. Over the last few months, here at Non-Fungi, we’ve seen an increase of spam to our email accounts and also now getting numerous brute force and failed login attempts accross several of our WordPress sites. The attackers use different IP addresses simultaneuously target a username with multiple login attempts.

WP Brute Force Prevention Plugins:

✅ Limit Login Attempts ReloadedWPS Hide Login

For real, we’ve been beavering up on the best methods to prevent it, such as hiding the wordpress login and a limit login attempts plugin, and of course keeping the SSL certificate up to date. We’ve seen a few good videos on Youtube covering WordPress login security and will continue to do the due diligence to keep our site and content safe.

Yay to The Limit Login Attempts Reloaded! is a nice plugin with useful features and is very capable free version. It lets you limit the amount of failed logins before the IP is locked out for a period of time, which is also customizable. Also can send an email when a certain amount of lockouts have occurred. You can also blacklist or whitelist different IP addresses and has some upgradeable paid features such as a cloud app login and more features and support.

So, WPS Hide login is more of a useful plugin against your random hacker or surfer trying to login and to maybe hide from bots. This plugin lets you change the URL of the WP login page from the standard WordPress location. I will mention it’s evident that the more advanced haxxors seem to even be able to attempt to login, even when you delete the login php page from the server lol, I’ve tried that.

So, hope this helps if it gets picked up in search engines or other WordPress bloggers that IMO these are a couple of the best plugins that I have currently found to help slow down, and hopefully prevent unwanted visitor or bots logging in to your site.

Art101 NFT Medicis

Carty Sewill Artist Seeking Medici

Art101 has unveiled a new web3 NFT gallery that links to on and off-chain metadata and images for all their NFT drops as well as each NFT marketplace listing, which I believe is a step towards making sure the NFTs are immutable and decentralized to stand the test of time. Patrn’s team looks to have grown to four dudes, with the addition of SolorMining, who has been a key player, spaces spokesperson, marketer, Discord mod, in getting the Art101 projects listed and verified on umpteen platforms, spearheaded umpteen articles and giveaways and community building activities.

Cropped Art101 Gallery Screenshot Mondrian NFT

Art101 web3 dev Iza_menace has been sharing some OBS sneak-peaks of what was up in the Discord, when not posting tubby memes or practicing martial arts. Enter the official gallery site for art-centric NFT projects of Art101: https://gallery.art101.io/

Art101 appears to be a dynamic, well educated, and on the cusp of Crypto and NFT trends, with JW hosting talk shows with latest news on the r/Cryptocurrency NFT reddit goings-on. Art101 artist Carty Sewill is no doubt blowing minds at OpenSea with candor and art and design knowledge, passion and talents for NFTs. Art101 have dropped, supported and are further developing tools for most of their collections. The anticipated R. Mutt drop promises to be another masterclass lesson in art history, digital art, meta, and web3 NFTs, and would be next on the roadmap after Based Vitalik.