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?

Hi@mohamedkhafaja,

The icons are small images upload to WP website. They are the screenshot of the front page (1st page) of video upload to YouTube, about 100 video. Clicking the image will start the YouTube video.

Regards

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.

Hi@mohamedkhafaja,

Thanks for your advice.

What I expect to achieve is as follows:-

1. The photos of the front page of each video are upload to the website
2. The photos are displayed as icons on page
3. Clicking the icon will display its photo in full size. Then I can read its content.

The above can be achieved with “Photo Gallery Plugin”. I did it before.

What I expect to do further is “If I find it is the right video which I need, on clicking the full size photo will start playing the video.
If it is not the right video which I expect to play, I click another icon to display another photo

Regards