Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2011-09-29
5
Medium Priority
?
453 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
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…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

636 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