c# - 图像上的文字 css(略有不同)

Question

使用 Visual Studio 2012、Umbraco 7 c# .net 4 css3 boostrap。

好的，所以我已经了解了所有标准的“图像上的文本”内容，并且它在 js fiddle 等中有效，但是我的情况略有不同。

CSS:

.project-tile{
    display:inline-block;
    position: relative;
}
.project-tile:after{
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: #26C1E3;
    opacity: 0.0;
}
.project-tile:hover:after{
    opacity: 0.75;
    transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}

.text-left-overlay{
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;   
}

这是 html:

<div class="col-sm-8 col-md-8 col-lg-8 testborder col-nopad ">
        <div class="project-tile">
            <img class="img-responsive project-image" src="../media/temp/18Pedruscot-2-1280x480.jpg" alt="" />
            <p class="text-left-overlay">Title Text</p>
        </div>           
    </div>

所以我已经有了在图像顶部显示蓝色不透明背景的悬停效果。

由于这是如何完成的，文本叠加层并没有真正起作用。

我需要在将鼠标悬停在图像上方并覆盖时显示文本，稍后我将添加我自己的过渡等，但现在这并不重要。

我需要做哪些调整才能实现这一目标？

如果您无法理解我的问题，请告诉我，我会尽力提供更多信息

JS Fiddle Example

Answer 1

试试这个:http://jsfiddle.net/yr1x7uwu/

我已将标题文本移到 HTML 中的图像之前，因为它没有覆盖它，并将悬停状态添加到 text-left-overlay。

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.project-tile{
    display:inline-block;
    position: relative;
}
.project-tile:after{
    content:'';
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: #26C1E3;
    opacity: 0.0;
}
.project-tile:hover:after{
    opacity: 0.75;
    transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}

.project-tile:hover .text-left-overlay {
    opacity: 1;
}

.text-left-overlay{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    opacity: 0;
    transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s;
}

<div class="col-sm-8 col-md-8 col-lg-8 testborder col-nopad ">
            <div class="project-tile">
                <p class="text-left-overlay">Title Text</p>
                <img class="img-responsive project-image" src="http://s9.postimg.org/54ngc5yvz/18_Pedruscot_2_1280x480.jpg" alt="" />
              
            </div>           
        </div>

这就是您想要实现的目标吗？