Question

使用Visual Studio 2012，Umbraco 7 c＃.net 4 css3 boostrap。

好的，所以我已经完成了所有标准＆＃34;文字覆盖图像＆＃34;东西和墙壁工作在小提琴等，但我的情况略有不同。

的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。

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

这是你想要达到的目标吗？

图像css上的文字（略有不同）

1 个答案: