将鼠标悬停在图像上时获得带有文本的黑色叠加层
Getting a black overlay with text when hovering over an image
我到处搜索这个，我找到了几个解决方案，但我无法让它在我的应用程序中工作。我正在尝试做的是在将鼠标悬停在图像上时在图像上覆盖黑色叠加，然后显示文本。理想情况下，我希望文本具有看起来像按钮的边框。
我希望它也适用于我的悬停秤。出于某种原因，在我的实际页面上，当将鼠标悬停在图像上时，它除了缩放之外什么都不做。它不会将父div 变成灰色。
我做错了什么？
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>希望这是你想要的。看看这个。为黑色覆盖添加了覆盖类。
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width / this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});* {
box-sizing: border-box;
}
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
float: left;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover .overlay {
background: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.home-img-block:after {
content: attr(data-content);
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
border: 1px solid #fff;
padding: 5px;
text-align: center;
}
.home-img-block:hover:after {
opacity: 1;
}
.home-img-block img {
-webkit-transition: all 1s ease;
/* Safari and Chrome */
-moz-transition: all 1s ease;
/* Firefox */
-ms-transition: all 1s ease;
/* IE 9 */
-o-transition: all 1s ease;
/* Opera */
transition: all 1s ease;
}
.home-img-block:hover img {
-webkit-transform: scale(1.25);
/* Safari and Chrome */
-moz-transform: scale(1.25);
/* Firefox */
-ms-transform: scale(1.25);
/* IE 9 */
-o-transform: scale(1.25);
/* Opera */
transform: scale(1.25);
background: rgba(0, 0, 0, 0.3);
width: 33.33%;
max-height: 100%;
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
width: 100%;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
<div data-content="FIND OUT MORE" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND OUT" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test2.jpg">
<div class="overlay"></div>
</div>
<div data-content="FIND" class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test3.jpg">
<div class="overlay"></div>
</div>
</div>你在css中缺少一些东西，这就是为什么你没有得到你想要的想要的效果。您需要添加相对于 .home-img-block 类的位置，然后您的一些东西被错误放置，在悬停在它上面时会产生奇怪的摇晃。
这是一个指向jsfiddle的链接，因此您可以弄乱它：
https://jsfiddle.net/kriscoulson/y32ekgdm/
#home-img-blocks {
width: 100%;
height: 600px;
}
.home-img-block {
width: 33.33%;
/*height: 100%;*/
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; Safari and Chrome
-moz-transition: all 1s ease; Firefox
-ms-transition: all 1s ease; IE 9
-o-transition: all 1s ease; Opera
transition: all 1s ease;
}
.home-img-block:hover img{
transform:scale(1.25);
background: rgba(0,0,0,0.3);
}
.home-img-block img.wide {
max-width: 100%;
max-height: 100%;
height: auto;
}
.home-img-block img.tall {
max-width: 100%;
max-height: 100%;
width: auto;
}这似乎是 css 的问题。主要在以下几点：
home-img-block:hover img
和
.home-img-block img
因为，.home-img-block正在包装 HTML。您不必具体说明。加上hover集合的第一个 CSS 行似乎是错误的。我已经将代码分叉到一个小提琴上。
https://jsfiddle.net/kuape5np/
你能确认一下，这是你想要的吗？
看看这个，我希望你正在寻找相同的
.home-img-block {
width: 33.33%;
display: inline-block;
overflow: hidden;
cursor: pointer;
position: relative;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
width: 100%;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
background: rgba(0,0,0,0.3);
max-height: 100%;
}
.home-img-block:after {
background: rgba(0,0,0,.5);
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover {
position: absolute;
z-index: 99;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.hover h2 {
color:#fff;
opacity: 0;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover:after,.home-img-block:hover .hover, .home-img-block:hover .hover h2 {
opacity: 1;
} <div id="home-img-blocks">
<div class="home-img-block">
<img src="http://optimumwebdesigns.com/images/test1.jpg">
<div class="hover">
<h2>FIND OUT MORE</h2>
</div>
</div>
</div>相关文章：
- 如何使用jquery在填充自动完成的值后使文本框只读
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 用程序搜索JQuery数据表中的文本
- jQuery匹配JSON对象的部分文本
- onkeyup无法动态创建多个文本区域
- 如何在下面的ES6循环中获得前面的文本
- 将输入字段中的文本提交到我的数据库，同时将其添加到我的列表中
- 让文本输入幻灯片显示输入时的新文本输入?然后向后滑动
- 借助asp.net验证或java脚本对多个文本进行验证
- 无法在ajaxStart中更改跨度文本
- 高亮显示时编辑文本大小和颜色
- jquery中的文本框验证
- 使用jQuery以红色和黑色闪烁文本
- 标记标签始终打印黑色文本，而不是指定的颜色
- 将鼠标悬停在图像上时获得带有文本的黑色叠加层
- 需要一个javascript函数在点击按钮时将文本重置为黑色
- 如何在jspdf中把黑色文本放在灰色矩形的顶部
- ios状态栏phonegap/cordova的黑色文本颜色
- 将导航条文本从白色变为黑色，就像装满水的杯子一样
