将鼠标悬停在图像上时，可以使用文本进行黑色叠加

时间：2016-01-21 05:18:24

标签： javascript jquery html css image

我搜遍了这一点，我找到了几个解决方案，但我无法在我的应用程序中使用它。我想要做的是在悬停在图像上时在图像上获得黑色覆盖，然后显示文本。理想情况下，我希望文本的边框看起来像一个按钮。

我希望这也可以在悬停时使用我的比例。由于某些原因，在我的实际页面上，当鼠标悬停在图像上时，除了缩放之外什么也没做。它不会将父div变成灰色。

我做错了什么？

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13; 
Date
＆＃13;
＆＃13;
＆＃13;

4 个答案:

答案 0 :(得分：1)

希望这是你想要的。看一下这个。为黑色叠加添加了叠加层。 

AM/PM
$('.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;
}

答案 1 :(得分：0)

你在css中遗漏了一些东西，这就是为什么你没有得到你想要的预期效果。你需要添加相对于.home-img-block类的位置，然后你的一些东西被放错了，当它悬停在它上面时会产生一个奇怪的震动。

这是jsfiddle的链接，所以你可以搞砸它：

https://jsfiddle.net/kriscoulson/y32ekgdm/

＆＃13;
＆＃13; 
#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;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这似乎与css有关。主要是在以下几点：

home-img-block:hover img

和

.home-img-block img

因为，.home-img-block正在包装HTML。你不必具体。加上hover集的第一个CSS行似乎是错误的。我把代码分成小提琴。

https://jsfiddle.net/kuape5np/

你能证实，是你想要的吗？

答案 3 :(得分：0)

检查一下我希望你正在寻找相同的

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

相关问题
最新问题