Fading picture captions

• 

  queensihi · Member · Nov 21, 2016 at 3:02 am

  • Copy link
  • Add topic to favorites

  How do I make the captions of each picture on my executive page fade onto the picture when the mouse rolls over?

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

• 

  thesacredpath · Member · Nov 22, 2016 at 10:56 pm

  • Copy link

  Hi there, give the following custom CSS a try. I don’t see any images on your Executive page, just the placeholders as if the images have been deleted.

  .wp-caption .wp-caption-text:hover {
      opacity: 0;
  }
  .wp-caption {
      position: relative;
  }
  .wp-caption .wp-caption-text {
      height: 70px;
      position: absolute;
      bottom: 0;
      width: 100%;
      transition: opacity 0.5s ease;
  }

• 

  queensihi · Member · Nov 24, 2016 at 4:41 pm

  • Copy link

  Hey thanks, the code works but it shows captions until I scroll over and it disappears, I’m looking to do the opposite so that it doesn’t show up until you scroll over

• 

  siobhyb · Member · Nov 25, 2016 at 12:39 pm

  • Copy link

  Hi @queensihi,

  You can achieve what you’re after by setting the opacity for .wp-caption .wp-caption-text:hover to 1 and for .wp-caption .wp-caption-text to 0, which I can see you’ve done. :) If you have any further questions then we’ll be right here.