Solved

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

Posted on 2011-09-29
5
391 Views
Last Modified: 2012-05-12
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.
0
Comment
Question by:polaatx
  • 2
  • 2
5 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 36818956
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
 
LVL 18

Accepted Solution

by:
Rartemass earned 500 total points
ID: 36869633
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
 
LVL 18

Assisted Solution

by:Rartemass
Rartemass earned 500 total points
ID: 36873568
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
 

Author Comment

by:polaatx
ID: 36890112
Hello, thanks for the info. I will report back as soon as I have a chance to try.
0
 

Author Closing Comment

by:polaatx
ID: 36899105
Thank you very much.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now