Solved

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

Posted on 2011-09-29
5
423 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Change static entered data to dynamic with counter 5 36
How to pass values to HTML-5 attribute dynamically? 24 53
html5 1 20
Diff of the day 2 10
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

730 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