How to achieve image title to vanish on hover?

[seedhula]

Hello,

I'd like to achieve that the image title and description (in the middle of the image) to disappear when one hovers on the image.

I am having trouble finding a way to achieve that.

Please help.

Cheers!

Seb

 

[sms-design]

Is this for just one image or lots of images ?

Some more information about version of

• wordpress
• elementor free/pro
• widget
• theme
• Web browser
• OS mac/pc/linux

Screenshot or site url may help people answer your questions.

 

[seedhula]

Hello this is for just one image.

I can easily achieve the hover effect where there is a clear image and on hover some overlay and image title appears. But I would like to achieve the opposite. The image would be with background overlay and title in normal condition, then on hover all that would disappear and clear image would be visible.

 

[sms-design]

Give your one image a unique id/class then apply some custom css. But without knowing your theme etc it's difficult to offer a coding solution

 

[seedhula]

My apologies. Here is more info.

Wordpress: 5.3.2
Elementor version: Elementor PRO - Version 2.8.3
Widget: Form builder
Theme: Twenty Twenty
Web browser: Chrome
OS: pc win 10

 

[sms-design]

Do you have a site url I maybe able to offer some code and which image you are looking to change

 

[seedhula]

Sorry, I am building locally with Bitnami. Can you offer some code anyway? I am rusty. Otherwise, I'll just have to figure it out

Thanks!

 

[sms-design]

basically you will give your element a unique id/class "my-picture" then in chrome dev tools look for that picture and then the "my-picture" enable hover.

Your are looking for the overlay or title and apply a display:none

Try this https://www.w3schools.com/howto/howto_css_image_overlay.asp and apply the display none to the css

 

[seedhula]

Thank you very much! Much appreciated. Cheers