Add an image hover effect in WordPress by a Custom HTML Block

The Code We Need

Here is the kind of code that we need in order to develop this effect:

<!-- In the Custom HTML Block -->
<!-- add styles first -->
<style>
#foto {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background: pink;
  background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/beanie-with-logo-1-600x600.jpg');
  background-size: cover;
}
#foto:hover {
  width: 200px;
  height: 200px;
  border: 1px solid blue;
  background: blue;
  background-image: url('https://woo.thoth.dk/wp-content/uploads/2023/08/hoodie-with-zipper-2-600x600.jpg');
    background-size: cover;
}
<style>
<!-- then add the HTML -->
<div id="foto"></div>

Avoid Blank Lines

Note the ugliness of the code above. No indentations. No whitespace. Unfortunately there is a reason for this mess.

The reason is this: WP will add stray <p> tags to the code, if whitespace is present. This is utterly destructive to scripts and styles. However, the cure is simple: don’t add any blank lines to the HTML block!

I hope that WP will correct this in the future – and give us colored syntax. We could use better code editing options. To be honest, I don’t edit this kind of code in WordPress. I write my code in an editor, like Nano, Visual Studio Code or Atom.

As soon as the code does the trick, I copy paste the code to WP.