响应式图像悬停和缩放与单词

Question

Responsive Image Hover - CSS/JQuery

我想和提出上述问题的Eric Wood一样，给出的答案很棒 - 这对我很有帮助。唯一的问题是，当您将鼠标悬停在图像上时，我希望显示文本。现在我的文字随图像一起移动。我希望文本显示并保持完全弹出的方式，同时图像保持缩小。任何人都可以帮助我吗？

这是代码（我使用了bootstrap，因此col-md-3意味着在中等屏幕上它占据了网格的12个部分中的3个，而col-xs-6意味着占用了12个中的6个，这意味着div是百分比/响应）：

HTML：

<div class="lg-20p col-md-3 col-xs-6 recreation-box">
    <img class="recreation-dummy-img" src="images/dummy.png" alt="" />
    <a class="imgwrapper" href="#">
        <span>
        <h4>Alpine Slide</h4>
        <p>Hop on your sled and cruise down an exhilarating half mile of     twisting, turning track back to the base.</p>
        </span>
        <img src="images/alpine.jpg" alt="Alpine Slide" />
    </a>
  </div>

CSS：

.recreation-box {
position: relative;
height:auto;
overflow:hidden;
}
.recreation-box .recreation-dummy-img{
width: 100%;
height:auto;
display:block;
}

.recreation-box a,
.recreation-box a:hover:before,
.recreation-box a:hover:after {
position:absolute;
left:0px;
right:0px;
}

.recreation-box a,
.recreation-box a:hover:after {
top:0;
bottom:0;
}

.recreation-box a:hover:after {
content:'';
display:block;
z-index: 100;
background-color: rgba(1, 67, 74, .7);
}

.recreation-box a:hover:before{
content: '';
color: #fff;
top:40%;
text-align:center;
z-index:200;
margin-top:-0.5em;
}
.recreation-box a span{
display:none;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
height:70%;
width:80%;
top:15%;
left:10%;
margin-left:auto;
margin-right:auto;
position:absolute;
text-align:left;
text-decoration:none;
text-shadow:1px 1px 5px rgba(0, 0, 0, 0.5);
z-index:300;
color:white;
vertical-align:middle;
}
.recreation-box a:hover span{
display:block;
}
.recreation-box .recreation-inner span h4{
font-size:22px;
font-weight:bold;
}

.recreation-box a span p{
font-size:14px;
font-weight:normal;
}
.recreation-box .imgwrapper {
width: 115%;
height: 115%;
margin-left: -5%;
margin-top: -5%;
transition: all .2s ease-in;  
}

.recreation-box .imgwrapper img {
width: 100%;
height: auto;
display: block;
}

.recreation-box .imgwrapper:hover {
width: 100%;
height: 100%;
margin-left: 0;
margin-top: 0;
}

@media (min-width:1200px) {
.lg-20p{
width:20%;
}
}