在图像顶部的响应翻转文本

-1

我已经在容器div内的图像上放置了一些文本，在响应式布局中。我现在想要创建一个“滚动”效果，其中鼠标悬停在文本上获得覆盖整个div /图像的透明绿色背景色。因此图像看起来有点绿。在图像顶部的响应翻转文本

见http://www.advocatedesign.co.uk/

任何帮助将受到欢迎！因为我不知道你想要什么...... 但你要找的悬停选择这个答案

2014-06-18 user2991837

请crea使用相关的代码使用JSFiddle（http://jsfiddle.net）。另外，你有没有尝试过自己想想？看到一个尝试总是比“我想这样做......任何帮助表示赞赏”更可取。最后，我们喜欢通过链接的代码和JSFiddle来保持问题的相关性（以防将来的域名不再存在）。 –

那么你想要文本有绿色背景着色？你想让整个图像发出绿色光芒吗？ – ForgetfulFellow

，你想我们为你做这个？请展示您已完成的一些工作！ – NoobEditor

你将需要另一个div，你可以用作“覆盖”层。

JSFiddle Example

（在未来，请包括与相关的代码你的问题中的一个的jsfiddle因为它可以帮助大家谁帮助你）

HTML

<div class="case_study"> 
    <div class="overlay"></div> 
    <a href="small-woods.html"> 
     <img src="http://lorempixel.com/400/200/" alt="Small Woods case study"> 
     <p>Small Woods</p> 
    </a> 
</div>

CSS：

.case_study{ 
    position: relative; 
    height: 200px; 
    width: 400px; 
} 
.case_study:hover .overlay{ 
    background-color:green; 
    opacity: .3; 
    height: 100%; 
    width: 100%; 
    position: absolute; 
}

来源

2014-06-18 17:13:11

天才。辉煌。非常感谢。我对这很多新东西（我从来没有听说过JSFiddle，我不知道如何获得在这个网站上的灰色小盒子的HTML和CSS，所以感谢坚持与我，而不是给我一个难道有一种方法可以给你一些点数或名誉，或者他们被称为什么吗？ – user2991837

我不确定这里发生了什么： – user2991837

我不确定这里发生了什么：.case_study：hover .overlay is这与写作相同.case_study a：hover .overlay？我刚刚试过这个，它不起作用。你的代码的工作原理我只是不明白怎么做？所以把鼠标悬停在.case_study div上。？我已经检查过这个网站的帮助页面，但是它似乎没有说明我是如何让代码在单色空间字体的灰色框中出现的。 – user2991837

请评论？：http://www.w3schools.com/CSSref/sel_hover.asp

设置类hover，坚持所需的背景色在那里：

P:hover 
{ 
background-color:green; 
}

来源

2014-06-18 16:54:36 ForgetfulFellow

在图像顶部的响应翻转文本

回答

相关问题