how to get text appear on mouse hover over image using CSS

Hello, on this page: http://leadinc.no/drupal7/public_projects_leadinc I am trying to get the title tag to appear on TOP of the image and only appear when mouse hovers over the image. Something similar to this http://leadinc.no/projects  except I want to do it with pure text and css (not separte hover image).

Also I am trying to get the content of each teaser (div.node-project-teaser) to appear side by side, 3 in a row. How do you do that? I used CLEAR:BOTH but that didn't work.

any help would be much appreciated.
polaatxAsked:
Who is Participating?
 
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
These two sites have some excellent examples on how to do this and provide links to the source.
http://sixrevisions.com/css/css-only-tooltips/
http://trentrichardson.com/examples/csstooltips/

I like them both for various reasons and for different projects.
0
 
SSupremeCommented:
you need to use something like this: a img:hover+.titletag {  }
what it does, it select title tag when you hover img and shows where you like it, dased on attributes.
Also you can read this article http://sixrevisions.com/css/snazzy-hover-effects-using-css/ 
0
 
RartemassConnect With a Mentor Author, martial arts coach, IT ConsultantCommented:
Sorry, my links are for the menu tooltips they used, not the image mouse over.
SSupreme's link covers that.

As for getting the images side by side 3 to a row you can use a layout similar to below.

<div class="container"><!--In CSS set this to the total width that you want the 3 column images to take up, eg 95%-->
   <div class="col1">
                <div id="image1"><img src.../></div>
                <div id="image2"><img src.../></div>
  </div> <!--close col1-->
   <div class="col2">
                <div id="image3"><img src.../></div>
                <div id="image4"><img src.../></div>
</div><!--close col2-->
   <div class"col3">
                <div id="image5"><img src.../></div>
                <div id="image6"><img src.../></div>
</div><!--close col3-->

To style, you have col1, col2 and col3 float (or position) around in the container div. Set the width for each as a percentage of the container. So if each are 30%, the three columns will take up 90% of the container div's space. This leaves 10% for borders and spacing etc.
The within each column you position the images on top of each other. You can use display:block in the CSS. This should make each image appear on a new line in each column.

Hope that makes sense.
0
 
polaatxAuthor Commented:
Hello, thanks for the info. I will report back as soon as I have a chance to try.
0
 
polaatxAuthor Commented:
Thank you very much.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.