Hover Tooltip

by Daniel Cheung

HTML

<div class="icon">
    <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300"></img>
    <span>Chrome</span>
</div>
<div class="icon">
    <img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300"></img>
    <span>Chrome</span>
</div>

CSS

.icon img{
    width:60px;
    display:block;
    margin:0 auto;
}

.icon {
    position:relative;
    display:inline-block;
    margin:30px;
    margin-top: 65px;
}

.icon span {
    position:absolute;
    display:table;
    top:-35px;
    background:#333;
    color:#fff;
    border-radius:3px;
    padding:3px 6px;
    opacity:0;
    transition: 0.2s all ease-out;
}

.icon img:hover ~ * {
    opacity:1;
}

.icon span:after {
    content: " ";
	width: 0; 
	height: 0; 
    position: absolute;
    top:26px;
    left:10px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #333;
}