How to make icons on a page magnified whenever mouse placed above it

Hey there,

Could you please clarify what you mean by icons here?
Are you referring to:

• Icon fonts (like Font Awesome icons or Dashicons)?
• Small images or graphics used as icons?
• SVG icons?
• Buttons or elements styled to look like icons?

Hey @satimis

Thanks for clarifying!

I am unsure which magnification effect you are after, but I think that such an effect can be achieved using a plugin. Look up the WordPress plugin repo. using terms like “image magnifier” or “image zoom”.

You could also achieve such an effect using custom CSS. Here are the steps:

• Go to Appearance > Customize > Additional CSS

• Paste the code below:

.video-thumbnail {
  transition: transform 0.3s ease;
}

.video-thumbnail:hover {
  transform: scale(1.5); /* Change this number to control the magnification scale */
  cursor: pointer; 
}

• Go to the page that includes the images you want the magnifying effect to be applied to. Expand the Advanced section and assign the image the “.video-thumbnail” class in the Additional CSS class(es) field. Finally, save the page.