pure css tooltip

HTML

<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明1</div>
    </div>
</div>
<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明2</div>
    </div>
</div>
<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明3</div>
    </div>
</div>
<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明4</div>
    </div>
</div>
<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明5</div>
    </div>
</div>
<div class="block">
    <div class="wrap">
        <div class="picture">
            <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
        </div>
        <div class="text">這是說明6</div>
    </div>
</div>

CSS

.block {
    width:50px;
    height:50px;
    padding:2px;
    border:solid;
    border-width:1px;
    float:left;
}
.wrap:hover {
    position:relative;
    top:-10px;
    left:-10px;
    height:50px;
    width:100px;
    padding:10px;
    background:rgba(256, 256, 256, 1);
    border:solid;
    border-width:1px;
    animation: wrap 0.5s;
}
.text {
    display:none;
    height:50px;
    width:50px;
    float:left;
}
.picture {
    height:50px;
    width:50px;
    float:left;
}
.wrap:hover .text {
    display:block;
    animation: text 1s;
}
@keyframes wrap {
    from {
        background:rgba(256, 256, 256, 0);
    }
    to {
        background:rgba(256, 256, 256, 1);
    }
}
@keyframes text {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}