Aligning text within a 'hover over' jquery

Question

I am designing a site that has images that when hovered over fade a text appears.

I have used the below thread to do this, all went well however when the text I am adding in goes to the full width and height of the image it's going over. I've tried to add padding to the text through my CSS but it doesn't work.

DIV with text over an image on hover

Here is my amended code, amended

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 -->

Still no joy! it's showing the image fine but no text is showing over it or anywhere on the page for that matter!

Any ideas on how to solve this would be greatly appreciated.

Thanks, John

Answer 1

A simple answer using CSS is to use the :hover pseudo class on an anchor tag.

Set you image container as position:relative in CSS.

Create a div containing your text, formatted using html and CSS inside the image container. Position this absolute in CSS. Absolute positioning positions elements relative to the parent container positioned relative. If no element is set to position relative it will take its position from the body tag. It is important to set a width to the element too.

THE HTML

<div class="container">
    <a><img src="img.jpg" alt="background">
       <div class="text">I will show on hover</div>
    </a>
</div>

CSS

div.container{position:relative;}

div.text{ position:absolute; top:0; left:0; width:100%; display:none; z-index:10;}

a:hover div.text{display:block;}

This will position the text over the container you set to position relative aligning to the top left corner. The z-index stacks elements one above the other. The higher the z-index the higher the element is in the stack.

w3 schools have some excellent definitions and examples on all the code above if it is new to you.

The effect you are after can be achieved with html and css alone. I would advise you focus on:

1. design your site on paper
2. layout your page with html and CSS
3. add your rollover effects and jQuery animations

before adding the jQuery animation

CSS3 transitions are not compatible with all browsers, there are work arounds in CSS though a jQuery fallback is often used.