将鼠标悬停在div上时尝试显示图像

Question

我有一个用css绘制的小像素化字符。此字符位于名为b的div元素内。当我将鼠标悬停在div上时，我想在div的顶部显示相对于其大小的图像。是否可以将图像叠加在div上？

这似乎是一个非常愚蠢的问题，但我似乎无法找到任何这方面的例子。

提前谢谢

CodePen http://codepen.io/anon/pen/wBNeVa

我的像素dude http://codepen.io/anon/pen/KwJqON

的CodePen

HTML

<header>
    <div class="container">
        <!--Pixel Me Dude -->
        <div class="b" id="navi"></div>
        <div id="infoi"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" height="20" width="32"/>b</div>
    </div>
</header>

CSS

#navi, 
#infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 10;
}

/* Smartphones  ----------- */
 @media (min-width : 320px) and (max-width : 480px) {
    .b {
        font-size: 0.5px;
    }
}
/* iPads  ----------- */
 @media (min-width : 480px) and (max-width : 1024px) {
    .b {
        font-size: 0.7px;
    }
}
/* Desktops and laptops ----------- */
 @media (min-width : 1024px) {
    .b {
        font-size: 1px;
    }
}
/* Large screens ----------- */
 @media (min-width : 1824px) {
    .b {
        font-size: 1.5px;
    }
}
.b {
    content:'';
    position: absolute;
    top: 35%;
    left: 30%;
    display: block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    box-shadow: 0em 0em transparent, 0em 0em transparent, 11em 0em transparent, 22em 0em transparent, 33em 0em transparent, 44em 0em transparent, 55em 0em transparent, 66em 0em #3a3a3a, 77em 0em #000, 88em 0em #3a3a3a, 99em 0em #000, 110em 0em #000, 121em 0em #000, 132em 0em #000, 143em 0em transparent, 154em 0em transparent, 165em 0em transparent, 176em 0em transparent, 11em 11em transparent, 22em 11em transparent, 33em 11em transparent, 44em 11em transparent, 55em 11em #3a3a3a, 66em 11em #000, 77em 11em #3a3a3a, 88em 11em #000, 99em 11em #000, 110em 11em #000, 121em 11em #000, 132em 11em #000, 143em 11em #000, 154em 11em transparent, 165em 11em transparent, 176em 11em transparent, 187em 11em transparent, 11em 22em transparent, 22em 22em transparent, 33em 22em transparent, 44em 22em #3a3a3a, 55em 22em #000, 66em 22em #3a3a3a, 77em 22em #000, 88em 22em #000, 99em 22em #000, 110em 22em #000, 121em 22em #000, 132em 22em #000, 143em 22em #000, 154em 22em #000, 165em 22em transparent, 176em 22em transparent, 187em 22em transparent, 11em 33em transparent, 22em 33em transparent, 33em 33em #3a3a3a, 44em 33em #000, 55em 33em #3a3a3a, 66em 33em #000, 77em 33em #000, 88em 33em #000, 99em 33em #000, 110em 33em #000, 121em 33em #000, 132em 33em #000, 143em 33em #000, 154em 33em #000, 165em 33em #000, 176em 33em transparent, 187em 33em transparent, 11em 44em transparent, 22em 44em #3a3a3a, 33em 44em #000, 44em 44em #3a3a3a, 55em 44em #000, 66em 44em #000, 77em 44em #000, 88em 44em #000, 99em 44em #000, 110em 44em #000, 121em 44em #000, 132em 44em #000, 143em 44em #000, 154em 44em #000, 165em 44em #000, 176em 44em #000, 187em 44em transparent, 11em 55em transparent, 22em 55em #3a3a3a, 33em 55em #f5cbb6, 44em 55em #f5cbb6, 55em 55em #fadece, 66em 55em #fadece, 77em 55em #fadece, 88em 55em #fadece, 99em 55em #fadece, 110em 55em #fadece, 121em 55em #fadece, 132em 55em #fadece, 143em 55em #fadece, 154em 55em #fadece, 165em 55em #fadece, 176em 55em #000, 187em 55em transparent, 11em 66em transparent, 22em 66em #3a3a3a, 33em 66em #f5cbb6, 44em 66em #f5cbb6, 55em 66em #fadece, 66em 66em #fadece, 77em 66em #fadece, 88em 66em #fadece, 99em 66em #fadece, 110em 66em #fadece, 121em 66em #fadece, 132em 66em #fadece, 143em 66em #fadece, 154em 66em #fadece, 165em 66em #fadece, 176em 66em #000, 187em 66em transparent, 11em 77em transparent, 22em 77em #3a3a3a, 33em 77em #f5cbb6, 44em 77em #f5cbb6, 55em 77em #fadece, 66em 77em #fadece, 77em 77em #fadece, 88em 77em #fadece, 99em 77em #fadece, 110em 77em #fadece, 121em 77em #fadece, 132em 77em #fadece, 143em 77em #fadece, 154em 77em #fadece, 165em 77em #fadece, 176em 77em #000, 187em 77em transparent, 11em 88em transparent, 22em 88em #3a3a3a, 33em 88em #f5cbb6, 44em 88em #f5cbb6, 55em 88em #fadece, 66em 88em #fadece, 77em 88em #fadece, 88em 88em #fadece, 99em 88em #fadece, 110em 88em #fadece, 121em 88em #fadece, 132em 88em #fadece, 143em 88em #fadece, 154em 88em #fadece, 165em 88em #fadece, 176em 88em #000, 187em 88em transparent, 11em 99em transparent, 22em 99em #3a3a3a, 33em 99em #f5cbb6, 44em 99em #3a3a3a, 55em 99em #000, 66em 99em #000, 77em 99em #000, 88em 99em #fadece, 99em 99em #fadece, 110em 99em #fadece, 121em 99em #3a3a3a, 132em 99em #000, 143em 99em #000, 154em 99em #000, 165em 99em #fadece, 176em 99em #000, 187em 99em transparent, 11em 110em transparent, 22em 110em #3a3a3a, 33em 110em #f5cbb6, 44em 110em #fadece, 55em 110em #fadece, 66em 110em #3a3a3a, 77em 110em #fadece, 88em 110em #fadece, 99em 110em #f5cbb6, 110em 110em #fadece, 121em 110em #fadece, 132em 110em #3a3a3a, 143em 110em #fadece, 154em 110em #fadece, 165em 110em #fadece, 176em 110em #000, 187em 110em transparent, 11em 121em transparent, 22em 121em #fadece, 33em 121em #f5cbb6, 44em 121em #fadece, 55em 121em #fadece, 66em 121em #fadece, 77em 121em #fadece, 88em 121em #fadece, 99em 121em #f5cbb6, 110em 121em #fadece, 121em 121em #fadece, 132em 121em #fadece, 143em 121em #fadece, 154em 121em #fadece, 165em 121em #fadece, 176em 121em #f5cbb6, 187em 121em transparent, 11em 132em transparent, 22em 132em #fadece, 33em 132em #f5cbb6, 44em 132em #fadece, 55em 132em #fadece, 66em 132em #fadece, 77em 132em #fadece, 88em 132em #fadece, 99em 132em #f5cbb6, 110em 132em #fadece, 121em 132em #fadece, 132em 132em #fadece, 143em 132em #fadece, 154em 132em #fadece, 165em 132em #fadece, 176em 132em #f5cbb6, 187em 132em transparent, 11em 143em transparent, 22em 143em #fadece, 33em 143em #f5cbb6, 44em 143em #fadece, 55em 143em #fadece, 66em 143em #fadece, 77em 143em #fadece, 88em 143em #fadece, 99em 143em #f5cbb6, 110em 143em #fadece, 121em 143em #fadece, 132em 143em #fadece, 143em 143em #fadece, 154em 143em #fadece, 165em 143em #fadece, 176em 143em #f5cbb6, 187em 143em transparent, 11em 154em transparent, 22em 154em transparent, 33em 154em #f5cbb6, 44em 154em #fadece, 55em 154em #fadece, 66em 154em #fadece, 77em 154em #fadece, 88em 154em #f5cbb6, 99em 154em #f5cbb6, 110em 154em #f5cbb6, 121em 154em #fadece, 132em 154em #fadece, 143em 154em #fadece, 154em 154em #fadece, 165em 154em #fadece, 176em 154em transparent, 187em 154em transparent, 11em 165em transparent, 22em 165em transparent, 33em 165em #f5cbb6, 44em 165em #fadece, 55em 165em #fadece, 66em 165em #fadece, 77em 165em #3a3a3a, 88em 165em #3a3a3a, 99em 165em #3a3a3a, 110em 165em #3a3a3a, 121em 165em #3a3a3a, 132em 165em #fadece, 143em 165em #fadece, 154em 165em #fadece, 165em 165em #fadece, 176em 165em transparent, 187em 165em transparent, 11em 176em transparent, 22em 176em transparent, 33em 176em #f5cbb6, 44em 176em #fadece, 55em 176em #fadece, 66em 176em #3a3a3a, 77em 176em #3a3a3a, 88em 176em #3a3a3a, 99em 176em #3a3a3a, 110em 176em #3a3a3a, 121em 176em #3a3a3a, 132em 176em #3a3a3a, 143em 176em #fadece, 154em 176em #fadece, 165em 176em #fadece, 176em 176em transparent, 187em 176em transparent, 11em 187em transparent, 22em 187em transparent, 33em 187em #f5cbb6, 44em 187em #fadece, 55em 187em #fadece, 66em 187em #3a3a3a, 77em 187em transparent, 88em 187em transparent, 99em 187em transparent, 110em 187em transparent, 121em 187em transparent, 132em 187em #3a3a3a, 143em 187em #fadece, 154em 187em #fadece, 165em 187em #fadece, 176em 187em transparent, 187em 187em transparent, 11em 198em transparent, 22em 198em transparent, 33em 198em transparent, 44em 198em #e5ddd9, 55em 198em #e5ddd9, 66em 198em #3a3a3a, 77em 198em #e5ddd9, 88em 198em transparent, 99em 198em transparent, 110em 198em transparent, 121em 198em #e5ddd9, 132em 198em #3a3a3a, 143em 198em #e5ddd9, 154em 198em #e5ddd9, 165em 198em transparent, 176em 198em transparent, 187em 198em transparent, 11em 209em transparent, 22em 209em transparent, 33em 209em transparent, 44em 209em transparent, 55em 209em #e5ddd9, 66em 209em #3a3a3a, 77em 209em #e5ddd9, 88em 209em #3a3a3a, 99em 209em #3a3a3a, 110em 209em #3a3a3a, 121em 209em #e5ddd9, 132em 209em #3a3a3a, 143em 209em #e5ddd9, 154em 209em transparent, 165em 209em transparent, 176em 209em transparent, 187em 209em transparent, 11em 220em transparent, 22em 220em transparent, 33em 220em transparent, 44em 220em transparent, 55em 220em transparent, 66em 220em #3a3a3a, 77em 220em #3a3a3a, 88em 220em #3a3a3a, 99em 220em #3a3a3a, 110em 220em #3a3a3a, 121em 220em #3a3a3a, 132em 220em #3a3a3a, 143em 220em transparent, 154em 220em transparent, 165em 220em transparent, 176em 220em transparent, 187em 220em transparent, 11em 231em transparent, 22em 231em transparent, 33em 231em transparent, 44em 231em transparent, 55em 231em transparent, 66em 231em transparent, 77em 231em #f5cbb6, 88em 231em #fadece, 99em 231em #fadece, 110em 231em #fadece, 121em 231em #fadece, 132em 231em transparent, 143em 231em transparent, 154em 231em transparent, 165em 231em transparent, 176em 231em transparent, 187em 231em transparent, 11em 242em transparent, 22em 242em transparent, 33em 242em transparent, 44em 242em transparent, 55em 242em transparent, 66em 242em #19689d, 77em 242em #f5cbb6, 88em 242em #fadece, 99em 242em #fadece, 110em 242em #fadece, 121em 242em #fadece, 132em 242em #0f75bc, 143em 242em transparent, 154em 242em transparent, 165em 242em transparent, 176em 242em transparent, 187em 242em transparent, 11em 253em transparent, 22em 253em transparent, 33em 253em transparent, 44em 253em transparent, 55em 253em transparent, 66em 253em #19689d, 77em 253em #f5cbb6, 88em 253em #fadece, 99em 253em #fadece, 110em 253em #fadece, 121em 253em #fadece, 132em 253em #0f75bc, 143em 253em transparent, 154em 253em transparent, 165em 253em transparent, 176em 253em transparent, 187em 253em transparent, 11em 264em #19689d, 22em 264em #19689d, 33em 264em #19689d, 44em 264em #19689d, 55em 264em #19689d, 66em 264em #19689d, 77em 264em #19689d, 88em 264em #fadece, 99em 264em #fadece, 110em 264em #fadece, 121em 264em #0f75bc, 132em 264em #0f75bc, 143em 264em #0f75bc, 154em 264em #0f75bc, 165em 264em #0f75bc, 176em 264em #0f75bc, 187em 264em #0f75bc, 11em 275em #19689d, 22em 275em #0f75bc, 33em 275em #0f75bc, 44em 275em #0f75bc, 55em 275em #0f75bc, 66em 275em #0f75bc, 77em 275em #0f75bc, 88em 275em #0f75bc, 99em 275em #19689d, 110em 275em #0f75bc, 121em 275em #0f75bc, 132em 275em #0f75bc, 143em 275em #0f75bc, 154em 275em #0f75bc, 165em 275em #0f75bc, 176em 275em #0f75bc, 187em 275em #0f75bc, 11em 286em #19689d, 22em 286em #0f75bc, 33em 286em #0f75bc, 44em 286em #0f75bc, 55em 286em #0f75bc, 66em 286em #0f75bc, 77em 286em #0f75bc, 88em 286em #0f75bc, 99em 286em #0f75bc, 110em 286em #0f75bc, 121em 286em #0f75bc, 132em 286em #0f75bc, 143em 286em #0f75bc, 154em 286em #0f75bc, 165em 286em #0f75bc, 176em 286em #0f75bc, 187em 286em #0f75bc, 11em 297em #19689d, 22em 297em #0f75bc, 33em 297em #0f75bc, 44em 297em #0f75bc, 55em 297em #0f75bc, 66em 297em #0f75bc, 77em 297em #0f75bc, 88em 297em #0f75bc, 99em 297em #19689d, 110em 297em #0f75bc, 121em 297em #0f75bc, 132em 297em #0f75bc, 143em 297em #0f75bc, 154em 297em #0f75bc, 165em 297em #0f75bc, 176em 297em #0f75bc, 187em 297em #0f75bc;
}

Answer 1

因为您的图片是由box-shadow制作的，所以我发现这是最佳解决方案。您需要将DIV元素与另一个DIV中的类b包装在一起，然后只需应用您需要的定位。如果有更有效的方式，请道歉。这允许您将所有内容保存在CSS中。

Codepen Here

  .container{
  position:relative;
  width:212px;
  height:308px;
}

.container:hover:before {
  position:relative;
  z-index:2;
  content:"";
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:url('http://masterherald.com/wp-content/uploads/2014/11/Bitcoin-Prices.png');
  background-size:212px 308px;
  display:block;
  width:212px;
  height:308px;
}

.b {
     content:'';
    position: absolute;
    top: 0%;
    left: 0%;
    display:block;
    width: 11px;
    height: 11px;
    box-shadow: 0em 0em transparent, 0em 0em transparent, 11em 0em transparent, 22em 0em transparent, 33em 0em transparent, 44em 0em transparent, 55em 0em transparent, 66em 0em #3a3a3a, 77em 0em #000, 88em 0em #3a3a3a, 99em 0em #000, 110em 0em #000, 121em 0em #000, 132em 0em #000, 143em 0em transparent, 154em 0em transparent, 165em 0em transparent, 176em 0em transparent, 11em 11em transparent, 22em 11em transparent, 33em 11em transparent, 44em 11em transparent, 55em 11em #3a3a3a, 66em 11em #000, 77em 11em #3a3a3a, 88em 11em #000, 99em 11em #000, 110em 11em #000, 121em 11em #000, 132em 11em #000, 143em 11em #000, 154em 11em transparent, 165em 11em transparent, 176em 11em transparent, 187em 11em transparent, 11em 22em transparent, 22em 22em transparent, 33em 22em transparent, 44em 22em #3a3a3a, 55em 22em #000, 66em 22em #3a3a3a, 77em 22em #000, 88em 22em #000, 99em 22em #000, 110em 22em #000, 121em 22em #000, 132em 22em #000, 143em 22em #000, 154em 22em #000, 165em 22em transparent, 176em 22em transparent, 187em 22em transparent, 11em 33em transparent, 22em 33em transparent, 33em 33em #3a3a3a, 44em 33em #000, 55em 33em #3a3a3a, 66em 33em #000, 77em 33em #000, 88em 33em #000, 99em 33em #000, 110em 33em #000, 121em 33em #000, 132em 33em #000, 143em 33em #000, 154em 33em #000, 165em 33em #000, 176em 33em transparent, 187em 33em transparent, 11em 44em transparent, 22em 44em #3a3a3a, 33em 44em #000, 44em 44em #3a3a3a, 55em 44em #000, 66em 44em #000, 77em 44em #000, 88em 44em #000, 99em 44em #000, 110em 44em #000, 121em 44em #000, 132em 44em #000, 143em 44em #000, 154em 44em #000, 165em 44em #000, 176em 44em #000, 187em 44em transparent, 11em 55em transparent, 22em 55em #3a3a3a, 33em 55em #f5cbb6, 44em 55em #f5cbb6, 55em 55em #fadece, 66em 55em #fadece, 77em 55em #fadece, 88em 55em #fadece, 99em 55em #fadece, 110em 55em #fadece, 121em 55em #fadece, 132em 55em #fadece, 143em 55em #fadece, 154em 55em #fadece, 165em 55em #fadece, 176em 55em #000, 187em 55em transparent, 11em 66em transparent, 22em 66em #3a3a3a, 33em 66em #f5cbb6, 44em 66em #f5cbb6, 55em 66em #fadece, 66em 66em #fadece, 77em 66em #fadece, 88em 66em #fadece, 99em 66em #fadece, 110em 66em #fadece, 121em 66em #fadece, 132em 66em #fadece, 143em 66em #fadece, 154em 66em #fadece, 165em 66em #fadece, 176em 66em #000, 187em 66em transparent, 11em 77em transparent, 22em 77em #3a3a3a, 33em 77em #f5cbb6, 44em 77em #f5cbb6, 55em 77em #fadece, 66em 77em #fadece, 77em 77em #fadece, 88em 77em #fadece, 99em 77em #fadece, 110em 77em #fadece, 121em 77em #fadece, 132em 77em #fadece, 143em 77em #fadece, 154em 77em #fadece, 165em 77em #fadece, 176em 77em #000, 187em 77em transparent, 11em 88em transparent, 22em 88em #3a3a3a, 33em 88em #f5cbb6, 44em 88em #f5cbb6, 55em 88em #fadece, 66em 88em #fadece, 77em 88em #fadece, 88em 88em #fadece, 99em 88em #fadece, 110em 88em #fadece, 121em 88em #fadece, 132em 88em #fadece, 143em 88em #fadece, 154em 88em #fadece, 165em 88em #fadece, 176em 88em #000, 187em 88em transparent, 11em 99em transparent, 22em 99em #3a3a3a, 33em 99em #f5cbb6, 44em 99em #3a3a3a, 55em 99em #000, 66em 99em #000, 77em 99em #000, 88em 99em #fadece, 99em 99em #fadece, 110em 99em #fadece, 121em 99em #3a3a3a, 132em 99em #000, 143em 99em #000, 154em 99em #000, 165em 99em #fadece, 176em 99em #000, 187em 99em transparent, 11em 110em transparent, 22em 110em #3a3a3a, 33em 110em #f5cbb6, 44em 110em #fadece, 55em 110em #fadece, 66em 110em #3a3a3a, 77em 110em #fadece, 88em 110em #fadece, 99em 110em #f5cbb6, 110em 110em #fadece, 121em 110em #fadece, 132em 110em #3a3a3a, 143em 110em #fadece, 154em 110em #fadece, 165em 110em #fadece, 176em 110em #000, 187em 110em transparent, 11em 121em transparent, 22em 121em #fadece, 33em 121em #f5cbb6, 44em 121em #fadece, 55em 121em #fadece, 66em 121em #fadece, 77em 121em #fadece, 88em 121em #fadece, 99em 121em #f5cbb6, 110em 121em #fadece, 121em 121em #fadece, 132em 121em #fadece, 143em 121em #fadece, 154em 121em #fadece, 165em 121em #fadece, 176em 121em #f5cbb6, 187em 121em transparent, 11em 132em transparent, 22em 132em #fadece, 33em 132em #f5cbb6, 44em 132em #fadece, 55em 132em #fadece, 66em 132em #fadece, 77em 132em #fadece, 88em 132em #fadece, 99em 132em #f5cbb6, 110em 132em #fadece, 121em 132em #fadece, 132em 132em #fadece, 143em 132em #fadece, 154em 132em #fadece, 165em 132em #fadece, 176em 132em #f5cbb6, 187em 132em transparent, 11em 143em transparent, 22em 143em #fadece, 33em 143em #f5cbb6, 44em 143em #fadece, 55em 143em #fadece, 66em 143em #fadece, 77em 143em #fadece, 88em 143em #fadece, 99em 143em #f5cbb6, 110em 143em #fadece, 121em 143em #fadece, 132em 143em #fadece, 143em 143em #fadece, 154em 143em #fadece, 165em 143em #fadece, 176em 143em #f5cbb6, 187em 143em transparent, 11em 154em transparent, 22em 154em transparent, 33em 154em #f5cbb6, 44em 154em #fadece, 55em 154em #fadece, 66em 154em #fadece, 77em 154em #fadece, 88em 154em #f5cbb6, 99em 154em #f5cbb6, 110em 154em #f5cbb6, 121em 154em #fadece, 132em 154em #fadece, 143em 154em #fadece, 154em 154em #fadece, 165em 154em #fadece, 176em 154em transparent, 187em 154em transparent, 11em 165em transparent, 22em 165em transparent, 33em 165em #f5cbb6, 44em 165em #fadece, 55em 165em #fadece, 66em 165em #fadece, 77em 165em #3a3a3a, 88em 165em #3a3a3a, 99em 165em #3a3a3a, 110em 165em #3a3a3a, 121em 165em #3a3a3a, 132em 165em #fadece, 143em 165em #fadece, 154em 165em #fadece, 165em 165em #fadece, 176em 165em transparent, 187em 165em transparent, 11em 176em transparent, 22em 176em transparent, 33em 176em #f5cbb6, 44em 176em #fadece, 55em 176em #fadece, 66em 176em #3a3a3a, 77em 176em #3a3a3a, 88em 176em #3a3a3a, 99em 176em #3a3a3a, 110em 176em #3a3a3a, 121em 176em #3a3a3a, 132em 176em #3a3a3a, 143em 176em #fadece, 154em 176em #fadece, 165em 176em #fadece, 176em 176em transparent, 187em 176em transparent, 11em 187em transparent, 22em 187em transparent, 33em 187em #f5cbb6, 44em 187em #fadece, 55em 187em #fadece, 66em 187em #3a3a3a, 77em 187em transparent, 88em 187em transparent, 99em 187em transparent, 110em 187em transparent, 121em 187em transparent, 132em 187em #3a3a3a, 143em 187em #fadece, 154em 187em #fadece, 165em 187em #fadece, 176em 187em transparent, 187em 187em transparent, 11em 198em transparent, 22em 198em transparent, 33em 198em transparent, 44em 198em #e5ddd9, 55em 198em #e5ddd9, 66em 198em #3a3a3a, 77em 198em #e5ddd9, 88em 198em transparent, 99em 198em transparent, 110em 198em transparent, 121em 198em #e5ddd9, 132em 198em #3a3a3a, 143em 198em #e5ddd9, 154em 198em #e5ddd9, 165em 198em transparent, 176em 198em transparent, 187em 198em transparent, 11em 209em transparent, 22em 209em transparent, 33em 209em transparent, 44em 209em transparent, 55em 209em #e5ddd9, 66em 209em #3a3a3a, 77em 209em #e5ddd9, 88em 209em #3a3a3a, 99em 209em #3a3a3a, 110em 209em #3a3a3a, 121em 209em #e5ddd9, 132em 209em #3a3a3a, 143em 209em #e5ddd9, 154em 209em transparent, 165em 209em transparent, 176em 209em transparent, 187em 209em transparent, 11em 220em transparent, 22em 220em transparent, 33em 220em transparent, 44em 220em transparent, 55em 220em transparent, 66em 220em #3a3a3a, 77em 220em #3a3a3a, 88em 220em #3a3a3a, 99em 220em #3a3a3a, 110em 220em #3a3a3a, 121em 220em #3a3a3a, 132em 220em #3a3a3a, 143em 220em transparent, 154em 220em transparent, 165em 220em transparent, 176em 220em transparent, 187em 220em transparent, 11em 231em transparent, 22em 231em transparent, 33em 231em transparent, 44em 231em transparent, 55em 231em transparent, 66em 231em transparent, 77em 231em #f5cbb6, 88em 231em #fadece, 99em 231em #fadece, 110em 231em #fadece, 121em 231em #fadece, 132em 231em transparent, 143em 231em transparent, 154em 231em transparent, 165em 231em transparent, 176em 231em transparent, 187em 231em transparent, 11em 242em transparent, 22em 242em transparent, 33em 242em transparent, 44em 242em transparent, 55em 242em transparent, 66em 242em #19689d, 77em 242em #f5cbb6, 88em 242em #fadece, 99em 242em #fadece, 110em 242em #fadece, 121em 242em #fadece, 132em 242em #0f75bc, 143em 242em transparent, 154em 242em transparent, 165em 242em transparent, 176em 242em transparent, 187em 242em transparent, 11em 253em transparent, 22em 253em transparent, 33em 253em transparent, 44em 253em transparent, 55em 253em transparent, 66em 253em #19689d, 77em 253em #f5cbb6, 88em 253em #fadece, 99em 253em #fadece, 110em 253em #fadece, 121em 253em #fadece, 132em 253em #0f75bc, 143em 253em transparent, 154em 253em transparent, 165em 253em transparent, 176em 253em transparent, 187em 253em transparent, 11em 264em #19689d, 22em 264em #19689d, 33em 264em #19689d, 44em 264em #19689d, 55em 264em #19689d, 66em 264em #19689d, 77em 264em #19689d, 88em 264em #fadece, 99em 264em #fadece, 110em 264em #fadece, 121em 264em #0f75bc, 132em 264em #0f75bc, 143em 264em #0f75bc, 154em 264em #0f75bc, 165em 264em #0f75bc, 176em 264em #0f75bc, 187em 264em #0f75bc, 11em 275em #19689d, 22em 275em #0f75bc, 33em 275em #0f75bc, 44em 275em #0f75bc, 55em 275em #0f75bc, 66em 275em #0f75bc, 77em 275em #0f75bc, 88em 275em #0f75bc, 99em 275em #19689d, 110em 275em #0f75bc, 121em 275em #0f75bc, 132em 275em #0f75bc, 143em 275em #0f75bc, 154em 275em #0f75bc, 165em 275em #0f75bc, 176em 275em #0f75bc, 187em 275em #0f75bc, 11em 286em #19689d, 22em 286em #0f75bc, 33em 286em #0f75bc, 44em 286em #0f75bc, 55em 286em #0f75bc, 66em 286em #0f75bc, 77em 286em #0f75bc, 88em 286em #0f75bc, 99em 286em #0f75bc, 110em 286em #0f75bc, 121em 286em #0f75bc, 132em 286em #0f75bc, 143em 286em #0f75bc, 154em 286em #0f75bc, 165em 286em #0f75bc, 176em 286em #0f75bc, 187em 286em #0f75bc, 11em 297em #19689d, 22em 297em #0f75bc, 33em 297em #0f75bc, 44em 297em #0f75bc, 55em 297em #0f75bc, 66em 297em #0f75bc, 77em 297em #0f75bc, 88em 297em #0f75bc, 99em 297em #19689d, 110em 297em #0f75bc, 121em 297em #0f75bc, 132em 297em #0f75bc, 143em 297em #0f75bc, 154em 297em #0f75bc, 165em 297em #0f75bc, 176em 297em #0f75bc, 187em 297em #0f75bc;
}

Answer 2

如果您使用字体大小来调整.b的大小，那么也为#infoi执行此操作 http://codepen.io/anon/pen/OPdjzX

.container {
  position: relative;
  display: block;
  width: 300px;
  height: 500px;
}

.b {
  position: absolute;
  top: 0;
  left: 0;
}
#infoi b {
  font-size:25em;
  }
#infoi {
  position: absolute;
  left: 25em;
  top: 45em;
  height:182.5em;
  width:160em;
}
#infoi img {
  height:100%;
  width:100%;
}
.container #infoi {
  opacity: 0;
  transition: opacity 0.5s;
}

.container:hover #infoi {
  opacity: 1;
}

/* Smartphones  ----------- */
 @media (min-width : 320px) and (max-width : 480px) {
    .b, #infoi {
        font-size: 0.5px;
    }
}
/* iPads  ----------- */
 @media (min-width : 480px) and (max-width : 1024px) {
    .b, #infoi {
        font-size: 0.7px;
    }
}
/* Desktops and laptops ----------- */
 @media (min-width : 1024px) {
     .b, #infoi {
        font-size: 1px;
    }
}
/* Large screens ----------- */
 @media (min-width : 1824px) {
     .b, #infoi {
        font-size: 1.5px;
    }
}
.b {
    content:'';
    position: absolute;
    display: block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    box-shadow: 0em 0em transparent, 0em 0em transparent, 11em 0em transparent, 22em 0em transparent, 33em 0em transparent, 44em 0em transparent, 55em 0em transparent, 66em 0em #3a3a3a, 77em 0em #000, 88em 0em #3a3a3a, 99em 0em #000, 110em 0em #000, 121em 0em #000, 132em 0em #000, 143em 0em transparent, 154em 0em transparent, 165em 0em transparent, 176em 0em transparent, 11em 11em transparent, 22em 11em transparent, 33em 11em transparent, 44em 11em transparent, 55em 11em #3a3a3a, 66em 11em #000, 77em 11em #3a3a3a, 88em 11em #000, 99em 11em #000, 110em 11em #000, 121em 11em #000, 132em 11em #000, 143em 11em #000, 154em 11em transparent, 165em 11em transparent, 176em 11em transparent, 187em 11em transparent, 11em 22em transparent, 22em 22em transparent, 33em 22em transparent, 44em 22em #3a3a3a, 55em 22em #000, 66em 22em #3a3a3a, 77em 22em #000, 88em 22em #000, 99em 22em #000, 110em 22em #000, 121em 22em #000, 132em 22em #000, 143em 22em #000, 154em 22em #000, 165em 22em transparent, 176em 22em transparent, 187em 22em transparent, 11em 33em transparent, 22em 33em transparent, 33em 33em #3a3a3a, 44em 33em #000, 55em 33em #3a3a3a, 66em 33em #000, 77em 33em #000, 88em 33em #000, 99em 33em #000, 110em 33em #000, 121em 33em #000, 132em 33em #000, 143em 33em #000, 154em 33em #000, 165em 33em #000, 176em 33em transparent, 187em 33em transparent, 11em 44em transparent, 22em 44em #3a3a3a, 33em 44em #000, 44em 44em #3a3a3a, 55em 44em #000, 66em 44em #000, 77em 44em #000, 88em 44em #000, 99em 44em #000, 110em 44em #000, 121em 44em #000, 132em 44em #000, 143em 44em #000, 154em 44em #000, 165em 44em #000, 176em 44em #000, 187em 44em transparent, 11em 55em transparent, 22em 55em #3a3a3a, 33em 55em #f5cbb6, 44em 55em #f5cbb6, 55em 55em #fadece, 66em 55em #fadece, 77em 55em #fadece, 88em 55em #fadece, 99em 55em #fadece, 110em 55em #fadece, 121em 55em #fadece, 132em 55em #fadece, 143em 55em #fadece, 154em 55em #fadece, 165em 55em #fadece, 176em 55em #000, 187em 55em transparent, 11em 66em transparent, 22em 66em #3a3a3a, 33em 66em #f5cbb6, 44em 66em #f5cbb6, 55em 66em #fadece, 66em 66em #fadece, 77em 66em #fadece, 88em 66em #fadece, 99em 66em #fadece, 110em 66em #fadece, 121em 66em #fadece, 132em 66em #fadece, 143em 66em #fadece, 154em 66em #fadece, 165em 66em #fadece, 176em 66em #000, 187em 66em transparent, 11em 77em transparent, 22em 77em #3a3a3a, 33em 77em #f5cbb6, 44em 77em #f5cbb6, 55em 77em #fadece, 66em 77em #fadece, 77em 77em #fadece, 88em 77em #fadece, 99em 77em #fadece, 110em 77em #fadece, 121em 77em #fadece, 132em 77em #fadece, 143em 77em #fadece, 154em 77em #fadece, 165em 77em #fadece, 176em 77em #000, 187em 77em transparent, 11em 88em transparent, 22em 88em #3a3a3a, 33em 88em #f5cbb6, 44em 88em #f5cbb6, 55em 88em #fadece, 66em 88em #fadece, 77em 88em #fadece, 88em 88em #fadece, 99em 88em #fadece, 110em 88em #fadece, 121em 88em #fadece, 132em 88em #fadece, 143em 88em #fadece, 154em 88em #fadece, 165em 88em #fadece, 176em 88em #000, 187em 88em transparent, 11em 99em transparent, 22em 99em #3a3a3a, 33em 99em #f5cbb6, 44em 99em #3a3a3a, 55em 99em #000, 66em 99em #000, 77em 99em #000, 88em 99em #fadece, 99em 99em #fadece, 110em 99em #fadece, 121em 99em #3a3a3a, 132em 99em #000, 143em 99em #000, 154em 99em #000, 165em 99em #fadece, 176em 99em #000, 187em 99em transparent, 11em 110em transparent, 22em 110em #3a3a3a, 33em 110em #f5cbb6, 44em 110em #fadece, 55em 110em #fadece, 66em 110em #3a3a3a, 77em 110em #fadece, 88em 110em #fadece, 99em 110em #f5cbb6, 110em 110em #fadece, 121em 110em #fadece, 132em 110em #3a3a3a, 143em 110em #fadece, 154em 110em #fadece, 165em 110em #fadece, 176em 110em #000, 187em 110em transparent, 11em 121em transparent, 22em 121em #fadece, 33em 121em #f5cbb6, 44em 121em #fadece, 55em 121em #fadece, 66em 121em #fadece, 77em 121em #fadece, 88em 121em #fadece, 99em 121em #f5cbb6, 110em 121em #fadece, 121em 121em #fadece, 132em 121em #fadece, 143em 121em #fadece, 154em 121em #fadece, 165em 121em #fadece, 176em 121em #f5cbb6, 187em 121em transparent, 11em 132em transparent, 22em 132em #fadece, 33em 132em #f5cbb6, 44em 132em #fadece, 55em 132em #fadece, 66em 132em #fadece, 77em 132em #fadece, 88em 132em #fadece, 99em 132em #f5cbb6, 110em 132em #fadece, 121em 132em #fadece, 132em 132em #fadece, 143em 132em #fadece, 154em 132em #fadece, 165em 132em #fadece, 176em 132em #f5cbb6, 187em 132em transparent, 11em 143em transparent, 22em 143em #fadece, 33em 143em #f5cbb6, 44em 143em #fadece, 55em 143em #fadece, 66em 143em #fadece, 77em 143em #fadece, 88em 143em #fadece, 99em 143em #f5cbb6, 110em 143em #fadece, 121em 143em #fadece, 132em 143em #fadece, 143em 143em #fadece, 154em 143em #fadece, 165em 143em #fadece, 176em 143em #f5cbb6, 187em 143em transparent, 11em 154em transparent, 22em 154em transparent, 33em 154em #f5cbb6, 44em 154em #fadece, 55em 154em #fadece, 66em 154em #fadece, 77em 154em #fadece, 88em 154em #f5cbb6, 99em 154em #f5cbb6, 110em 154em #f5cbb6, 121em 154em #fadece, 132em 154em #fadece, 143em 154em #fadece, 154em 154em #fadece, 165em 154em #fadece, 176em 154em transparent, 187em 154em transparent, 11em 165em transparent, 22em 165em transparent, 33em 165em #f5cbb6, 44em 165em #fadece, 55em 165em #fadece, 66em 165em #fadece, 77em 165em #3a3a3a, 88em 165em #3a3a3a, 99em 165em #3a3a3a, 110em 165em #3a3a3a, 121em 165em #3a3a3a, 132em 165em #fadece, 143em 165em #fadece, 154em 165em #fadece, 165em 165em #fadece, 176em 165em transparent, 187em 165em transparent, 11em 176em transparent, 22em 176em transparent, 33em 176em #f5cbb6, 44em 176em #fadece, 55em 176em #fadece, 66em 176em #3a3a3a, 77em 176em #3a3a3a, 88em 176em #3a3a3a, 99em 176em #3a3a3a, 110em 176em #3a3a3a, 121em 176em #3a3a3a, 132em 176em #3a3a3a, 143em 176em #fadece, 154em 176em #fadece, 165em 176em #fadece, 176em 176em transparent, 187em 176em transparent, 11em 187em transparent, 22em 187em transparent, 33em 187em #f5cbb6, 44em 187em #fadece, 55em 187em #fadece, 66em 187em #3a3a3a, 77em 187em transparent, 88em 187em transparent, 99em 187em transparent, 110em 187em transparent, 121em 187em transparent, 132em 187em #3a3a3a, 143em 187em #fadece, 154em 187em #fadece, 165em 187em #fadece, 176em 187em transparent, 187em 187em transparent, 11em 198em transparent, 22em 198em transparent, 33em 198em transparent, 44em 198em #e5ddd9, 55em 198em #e5ddd9, 66em 198em #3a3a3a, 77em 198em #e5ddd9, 88em 198em transparent, 99em 198em transparent, 110em 198em transparent, 121em 198em #e5ddd9, 132em 198em #3a3a3a, 143em 198em #e5ddd9, 154em 198em #e5ddd9, 165em 198em transparent, 176em 198em transparent, 187em 198em transparent, 11em 209em transparent, 22em 209em transparent, 33em 209em transparent, 44em 209em transparent, 55em 209em #e5ddd9, 66em 209em #3a3a3a, 77em 209em #e5ddd9, 88em 209em #3a3a3a, 99em 209em #3a3a3a, 110em 209em #3a3a3a, 121em 209em #e5ddd9, 132em 209em #3a3a3a, 143em 209em #e5ddd9, 154em 209em transparent, 165em 209em transparent, 176em 209em transparent, 187em 209em transparent, 11em 220em transparent, 22em 220em transparent, 33em 220em transparent, 44em 220em transparent, 55em 220em transparent, 66em 220em #3a3a3a, 77em 220em #3a3a3a, 88em 220em #3a3a3a, 99em 220em #3a3a3a, 110em 220em #3a3a3a, 121em 220em #3a3a3a, 132em 220em #3a3a3a, 143em 220em transparent, 154em 220em transparent, 165em 220em transparent, 176em 220em transparent, 187em 220em transparent, 11em 231em transparent, 22em 231em transparent, 33em 231em transparent, 44em 231em transparent, 55em 231em transparent, 66em 231em transparent, 77em 231em #f5cbb6, 88em 231em #fadece, 99em 231em #fadece, 110em 231em #fadece, 121em 231em #fadece, 132em 231em transparent, 143em 231em transparent, 154em 231em transparent, 165em 231em transparent, 176em 231em transparent, 187em 231em transparent, 11em 242em transparent, 22em 242em transparent, 33em 242em transparent, 44em 242em transparent, 55em 242em transparent, 66em 242em #19689d, 77em 242em #f5cbb6, 88em 242em #fadece, 99em 242em #fadece, 110em 242em #fadece, 121em 242em #fadece, 132em 242em #0f75bc, 143em 242em transparent, 154em 242em transparent, 165em 242em transparent, 176em 242em transparent, 187em 242em transparent, 11em 253em transparent, 22em 253em transparent, 33em 253em transparent, 44em 253em transparent, 55em 253em transparent, 66em 253em #19689d, 77em 253em #f5cbb6, 88em 253em #fadece, 99em 253em #fadece, 110em 253em #fadece, 121em 253em #fadece, 132em 253em #0f75bc, 143em 253em transparent, 154em 253em transparent, 165em 253em transparent, 176em 253em transparent, 187em 253em transparent, 11em 264em #19689d, 22em 264em #19689d, 33em 264em #19689d, 44em 264em #19689d, 55em 264em #19689d, 66em 264em #19689d, 77em 264em #19689d, 88em 264em #fadece, 99em 264em #fadece, 110em 264em #fadece, 121em 264em #0f75bc, 132em 264em #0f75bc, 143em 264em #0f75bc, 154em 264em #0f75bc, 165em 264em #0f75bc, 176em 264em #0f75bc, 187em 264em #0f75bc, 11em 275em #19689d, 22em 275em #0f75bc, 33em 275em #0f75bc, 44em 275em #0f75bc, 55em 275em #0f75bc, 66em 275em #0f75bc, 77em 275em #0f75bc, 88em 275em #0f75bc, 99em 275em #19689d, 110em 275em #0f75bc, 121em 275em #0f75bc, 132em 275em #0f75bc, 143em 275em #0f75bc, 154em 275em #0f75bc, 165em 275em #0f75bc, 176em 275em #0f75bc, 187em 275em #0f75bc, 11em 286em #19689d, 22em 286em #0f75bc, 33em 286em #0f75bc, 44em 286em #0f75bc, 55em 286em #0f75bc, 66em 286em #0f75bc, 77em 286em #0f75bc, 88em 286em #0f75bc, 99em 286em #0f75bc, 110em 286em #0f75bc, 121em 286em #0f75bc, 132em 286em #0f75bc, 143em 286em #0f75bc, 154em 286em #0f75bc, 165em 286em #0f75bc, 176em 286em #0f75bc, 187em 286em #0f75bc, 11em 297em #19689d, 22em 297em #0f75bc, 33em 297em #0f75bc, 44em 297em #0f75bc, 55em 297em #0f75bc, 66em 297em #0f75bc, 77em 297em #0f75bc, 88em 297em #0f75bc, 99em 297em #19689d, 110em 297em #0f75bc, 121em 297em #0f75bc, 132em 297em #0f75bc, 143em 297em #0f75bc, 154em 297em #0f75bc, 165em 297em #0f75bc, 176em 297em #0f75bc, 187em 297em #0f75bc;
}

<header>
    <div class="container clearfix">
        <!--Pixel Me Dude -->
        <div class="b"></div>
        <div id="infoi"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/2000px-Smiley.svg.png" /><b>blop bla bla</b></div>
    </div>
</header>

你需要调整，左，顶部高度和宽度来覆盖你想要的区域：）