Teo Teo - 1 month ago 4
CSS Question

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

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

<div class="supplier_box_top">
<p class="name">Company Name</p>
<p class="city">Country</p>
<p class="info" ><a href="#" target="_blank" id="1" class="show_info_box">nfoBox</a></p>
<p class="site_link"><a href="javascript:void(0)">www.your-company.com</a></p>
</div>

Answer

If the <img> 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:

<p class="name">Company Name <img src="" /></p>
.name {
   position: relative;
}

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

.name:hover img {
    display: inline;
}
Comments