如何将文本放在相对定位的图像的右侧？

Question

我有一个相对定位的图像，以便我可以对它进行css鼠标悬停效果（当鼠标悬停时，它会更改图像）。它是一种响应式设计，因此图像可以根据屏幕尺寸增大或缩小。

我想立即在此图片的右侧显示文字。谁能告诉我怎么做？

现在我的代码 - 文本最终显示在图像的后面（而不是旁边）。谢谢！

CSS （在鼠标悬停时更改图片）：

#mypic {
  position:relative;
  max-width:100%;
}

#mypic img {
  position:absolute;
  left:0;
  opacity:1;
  -webkit-transition: opacity .3s ease-out;
  -moz-transition: opacity .3s ease-out;
  -o-transition: opacity .3s ease-out;
  transition: opacity .3s ease-out;
}

#mypic img.top:hover {
  opacity:0;
}

HTML ：

<div id="mypic"><img class="bottom" src="bottom.jpg" /><img class="top" src="top.jpg" /></div>
<p>Here is text that should be displayed to the right of the image.</p>