Image titles can provide useful information but can also clutter your design, especially when displayed on hover.
Removing the image title during hover can create a cleaner and more visually appealing user experience.
This article will guide you through the steps to hide image titles on hover using CSS, helping you maintain a sleek and professional look on your website.
Note: The image's title is a very important attribute for SEO.
Remove the image title on a single image using the Image module
Open the Image module settings
Go to Advanced Tab → Attributes → Image Title Text
Delete any text that has been set as the Image Title Text
Remove image titles from all images
To remove the title attribute on all images from a website, you can use the following JS script, which can be added to Divi → Theme Option → Integration Tab → Header
<script id="remove-all-images-title-attribute">
// Wait for the DOM to be fully loaded before running the script
document.addEventListener('DOMContentLoaded', function () {
// Function to remove the title attribute
function removeTitle(event) {
this.dataset.originalTitle = this.title;
this.removeAttribute('title');
}
// Function to restore the title attribute
function restoreTitle(event) {
// Only restore the title if it was previously stored
if (this.dataset.originalTitle) {
this.setAttribute('title', this.dataset.originalTitle);
}
}
// Get all the img elements on the page
const images = document.querySelectorAll('img');
// Add the event listeners to each image
images.forEach(img => {
img.addEventListener('mouseover', removeTitle);
img.addEventListener('mouseout', restoreTitle);
});
});
</script>
Note: The script will only remove the image title when the mouse pointer is over the image. As soon as the mouse pointer leaves the image, the title attribute will be returned to its initial value. This way, the page SEO is not affected.