Adding text upon hovering over a picture

• 

  effort4success · Member · Feb 27, 2017 at 9:01 pm

  • Copy link
  • Add topic to favorites

  Hello, does anyone know how I can create text appear on an image after I hover over it? Thank you

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

• 

  thesacredpath · Member · Mar 1, 2017 at 1:27 am

  • Copy link

  Can you let me know which image? Generally this is pretty hard to do with CSS, but I’ll take a look.

• 

  effort4success · Member · Mar 1, 2017 at 5:36 am

  • Copy link

  Sure, I am thinking of doing it on the very top image of that page, here is the URL: http://imgur.com/a/chdjM.

  This is hard with just CSS because we need to actually create the picture AND text together in Java/HTML first, and then separate the two components by hover action in the CSS, is that correct?

• 

  thesacredpath · Member · Mar 1, 2017 at 7:43 pm

  • Copy link

  I’ve worked up this example, which creates text over the header image, which you can use as a guide, and just to see it is possible and how it works.

  .header:hover:before {
  	content: "This is some text";
  	position: absolute;
  	color: #cc0000;
  	font-size: 200%;
  }

  After adding and saving this, go to your main page and hover over the header area to see the text. It will appear at the left edge.

• 

  effort4success · Member · Mar 3, 2017 at 5:19 pm

  • Copy link

  Perfect, thanks!

• 

  thesacredpath · Member · Mar 3, 2017 at 7:57 pm

  • Copy link

  You are welcome.