By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

How to achieve image title to vanish on hover?

S

seedhula

New Member
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
 
elementor official
sms-design

sms-design

Member
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.
 
elementor official
S

seedhula

New Member
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.
 
elementor official
sms-design

sms-design

Member
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
 
elementor official
S

seedhula

New Member
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
 
elementor official
sms-design

sms-design

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

seedhula

New Member
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!
 
elementor official
sms-design

sms-design

Member
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
 
elementor official
elementor official
Top