Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

What is the easiest way to show an image with text:hover?

What is the easiest way to show an image with text:hover?

Problem

I am trying to show an image(company logo 150 x 100 px) on text:hover when the user is coming on the company name. The image should show on the right side of the name.

I don't know if I can solve it with CSS3 or if I need some jQuery for it - which I wouldn't prefer much.

Any ideas?

My HTML

Company Name

Country

nfoBox

Problem Courtesy of: Teo

Solution

If the is placed after the Company Name .name, Then you could use adjacent a + b or general a ~ b sibling selectors to display the image:

img.logo {
   display: none;
}

.name:hover ~ img.logo {
    display: inline;
}

However, you could put the image inside the same paragraph and use the following:

Company Name

.name {
   position: relative;
}

.name img {
   position: absolute;
   left: 100%;
   display: none;
}

.name:hover img {
    display: inline;
}
Solution courtesy of: Hashem Qolami

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

What is the easiest way to show an image with text:hover?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×