Hide other div when an image is moused over

• 

  takoateli · Member · Jul 17, 2016 at 4:09 pm

  • Copy link
  • Add topic to favorites

  I’m currently working on a site where I’m using divs to position text over an image. What I would like to accomplish is that when the image is not moused over the visitor sees the image and the text positioned over it. When the image is moused over I would like the text to disappear. I tried this and it didn’t work. Can something like this be done in CSS?
  .wp-image-1943:hover {
  opacity: .3;
  .text-for-image (
  display: none;
  }
  }

  The blog I need help with is: (visible only to logged in users)

• 

  hallluke · Member · Jul 17, 2016 at 4:16 pm

  • Copy link

  Do you have a published page or post that we can see where the image and text are set up?

• 

  takoateli · Member · Jul 17, 2016 at 4:21 pm

  • Copy link

  Hallluke Thank you! Yes. http://p2pchildbirth.staging.wpengine.com/

  I want to hide the text which is over the two side by side images “Pain to Power for Mamas” and “Pain to Power for Doulas”.

• 

  hallluke · Member · Jul 17, 2016 at 4:34 pm

  • Copy link

  Oh, that’s not a site hosted here at WordPress.com, you probably have a WordPress.org installation and they have their own dedicated forums. Next time that’s the place to ask.

  However, this code should do trick:

  .for-mothers-image:hover .for-mothers-text,
  .for-doulas-image:hover .for-doulas-text {
    opacity: 0;
  }
  .for-mothers-text,
  .for-doulas-text {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

• 

  takoateli · Member · Jul 17, 2016 at 4:35 pm

  • Copy link

  Thank you for the answer, and for providing it even though I’m on the wrong forum!

  Have a great day!
  Thank you!