如何在引导图像上过分获取内容

Question

图像1 在图像1我试图实现把内容放在图像显示，但我找不到具体的代码，也悬停div被放大

图片2 图像2我正在想右边的内容，左边的图像，但它不应该影响到响应也。

任何人都可以请提供我在哪里，这两样东西都可以我已经通过谷歌搜索的例子，但我得到的是悬停！

Answer 1

下面是示例代码：

HTML：

<div class="example example1"> 
    <p>This uses the image as background</p> 
</div> 

<div class="example example2"> 
    <img src="http://cdn2.johnnyseeds.com/images/product/large/1814.jpg" alt=""> 
    <div class="text"> 
    This uses the image as background 
    </div> 
</div> 

CSS：

.example { 
    height: 250px; 
    width: 250px; 
    position: relative; 
} 
.example1 { 
    background-image: url(http://cdn2.johnnyseeds.com/images/product/large/1814.jpg); 
    background-size: cover; 
} 

.example2 img { 
    width: 100%; 
} 
.text { 
    position: absolute; 
    width: 100px; 
    top: 50%; 
    right: 0px; 
    background-color: #ccc; 
    z-index: 5; 
} 

这里是一个jsfiddle

实施例1使用的背景图像的版本。示例2使用相对定位帧内的绝对div。