Hover to reveal text help!

[JONNYB]

Hi there,

I have been having difficulty getting the hover function work on a site I am currently building.
As it stands I have an image, which on overlay I would like to display text that I can format through CSS.

Currently my code is quite simple, which I think should do it...

CSS
p1{font-size:1.3em;text-align:left;color:#ffffff;font-family: 'geosanslightregular';margin:100px 20px 0px 20px;padding:0;}
div.containerdiv{position:relative}
div.texts{position:absolute; top:0; left:0; width:100%; display:none; z-index:10}
div.texts:hover{display:block}

HTML
<div class="grid_8">
<a href="cncpt.html">
<div class="containerdiv">
<img src="images/cncpt.jpg" alt="background">
<div class="texts">
<p1>LAUNCH OF E-COMMERCE MENSWEAR STORE, STOCKING EVERYONE FROM BALMAIN AND GIVENCHY TO ADIDAS X OPENING CEREMONY, YMC, NIKE AND BEYOND. BREAK HOSTED THE LAUNCH EVENT AND INTRODUCED 200+ KEY MEDIA, BRAND AND INDUSTRY CONTACTS TO THE STORE. WE CONTINUE TO OPERATE THE PRESS OFFICE FOR CNCPT AND HAVE PICKED UP FANS EVERYWHERE FROM GQ DAILY AND METRO, TO KEY ONLINE INFLUENCERS.</p1>
</div>
</div>
</a>
</div>
<!-- end .grid_8 -->

As it stands nothing happens on hover and I've gone through it a few times, even looking at a JQuery solution, which stopped me being able to style the text!
If anyone is able to take a look and see where I am going wrong it would be hugely appreciated!

Thanks,
John

[Ronald Roe]

Well, for one thing, <p1> doesn't exist...

For another thing, the image is outside the container you're hovering, and the container is set to display:none. You can't hover something that isn't there. Try like this:

<div class="hoverThing">
  <img src="whatever" />
  <p>Some text and what-not</p>
</div>

.hoverThing{
  position:relative;
}
.hoverThing p{
  display:none;
  position:absolute;
  top:0;
  left:0;
}
.hoverThing:hover p{
  display:block;
}

That should get the functionality going for you. From there, just style it up.

[JONNYB]

Will try this out, thanks very much

[JONNYB]

sorry one more question, how do I lose the image on hover and just show a white background?

[TheGAME1264]

.hoverThing:hover img {display: none;}

[Andrew Yurlov]

First you need to set a class on the image. Then just use css to do what you want. Should be something like this

<img src="" class="background">

img.background{
display: block;
}

.hoverThing:hover img.background{
display: none;
}

[Ronald Roe]

You don't even have to remove the image. Just give the <p> a solid background.

[JONNYB]

Thanks very mcuh for this both, am having an issue... have tried both and had the same result, stopped the text showing up at all.

[Ronald Roe]

Is this like what you put in there?

.hoverThing p{background:white;}

[TheGAME1264]

You don't have to set a class on the image in this case...it's the only one. You can use the tag to adjust it. .hoverThing img and .hoverThing img.background will do the exact same thing in this particular instance.

As far as what's going on now...JONNYB, upload it so we can see it, please.