?
Solved

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

Posted on 2011-09-29
5
Medium Priority
?
441 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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 2000 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 2000 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

Industry Leaders: 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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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 the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

765 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