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

What We Try To Do

Please hover your mouse over the image below.

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.


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close