隨着背景顏色從褪色中停止文本

Question

我創建了2個框，在懸停時，褪色爲紅色，但我希望文本保持完全白色並且不會與背景/圖像褪色。我在編碼方面不是很先進，但如果可能的話，任何幫助都會與現場演示一起欣賞？

CSS

.image { 
    position:relative; 
    width:400px; 
    height:200px; 
    background-color:#555555; 
    color: #ffffff; 
} 
.image img { 
    width:50%; 
    vertical-align:top; 
    color: #ffffff; 
} 
.image:after, .image:before { 
    position:absolute; 
    background-color:rgba (255,0,0,1); 
    opacity:0; 
    transition: 0.5s ease; 
    -webkit-transition: 0.5s ease; 
    color: #ffffff; 
} 
.image:after { 
    content:'\A'; 
    width:100%; height:100%; 
    top:0; left:0; 
    background-color:rgba(255,0,0,0.75); 
    color:#ffffff; 
} 
.image:before { 
    width:50%; 
    color:#fff; 
    z-index:1; 
    bottom:0; 
    padding:4px 10px; 
    text-align:center; 
    background-color:red; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    color: rgba(255,255,255,0); 
} 
.image:hover:after, .image:hover:before { 
    opacity:1; 
} 
.text { 
    padding-left:210px; 
    padding-right:10px; 
    margin-top:-190px; 
    color:rgba(255,255,255,10); 
    font-family:Arial; 
    font-size:15px; 
    opacity: 1; 
} 

HTML

<div class="image"> 
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> 
    <div class="text"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> 
    </div> 
</div> 

<hr> 

<div class="image"> 
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" /> 
    <div class="text"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud. 
    </div> 
</div> 

Answer 1

既然你想保持在前面的文本只使用z-index在你的CSS添加此鏈接：

.text { 
    position:relative; 
    z-index:1; 
} 

入住這Demo Fiddle

如果你想在前面的圖片也使用相同的屬性http://jsfiddle.net/2qekazm4/2/

Answer 2

在這裏，你去我的朋友，我把這個在小提琴和它的工作奇妙，讓我知道，如果有問題，或者是不是你想要它做。下面是它

http://jsfiddle.net/sps5rxhg/

.image { 
    position:relative; 
    width:400px; 
    height:200px; 
    background-color:#555555; 
    color: #ffffff; 
} 
.image img { 
    width:50%; 
    vertical-align:top; 
    color: #ffffff; 
} 
.image:after, .image:before { 
    position:absolute; 
    background-color:rgba (255,0,0,1); 
    opacity:0; 
    transition: 0.5s ease; 
    -webkit-transition: 0.5s ease; 
    color: #ffffff; 
} 
.image:after { 
    content:'\A'; 
    width:100%; height:100%; 
    top:0; left:0; 
    background-color:rgba(255,0,0,0.75); 
    color:#ffffff; 
} 
.image:before { 
    width:50%; 
    color:#fff; 
    z-index:1; 
    bottom:0; 
    padding:4px 10px; 
    text-align:center; 
    background-color:red; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    color: rgba(255,255,255,0); 
} 
.image:hover:after, .image:hover:before { 
    opacity:.5; 
} 
.text { 
    padding-left:210px; 
    padding-right:10px; 
    margin-top:-190px; 
    color:rgba(255,255,255,10); 
    font-family:Arial; 
    font-size:15px; 
    opacity: 1; 
     position:relative; 
    z-index:1; 
}