Question

我有三个像这样的div彼此相邻：

HTML看起来像这样：

<div class="row">

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <img src="images/image1.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 1</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="reserved__inner">
        <div class="overlay"></div>
        <img src="images/image2.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

<div class="col col--lg-4 col--md-6">
    <div class="overlay"></div>
    <div class="reserved__inner">
        <img src="images/image3.png" alt="" />
        <div class="reserved__text">
            <h3 class="first">Lorem ipsum</h3>
            <p>lorem ipsum text</p>
            <a href="#" class="button">Link 2</a>
        </div>
    </div>
</div>

正如您所看到的，我的div中也有p element和a element，但这些都是隐藏的。在我的javascript文件中，我有这个：

$('.reserved__inner').on({
    mouseenter: function() {
        $(this).find('h3').addClass('black');
        $(this).find('p').show();
        $(this).find('a').show();

    },
    mouseleave: function() {
        $(this).find('h3').removeClass('black');
        $(this).find('p').hide();
        $(this).find('a').hide();
    }
});

当你将鼠标悬停在此时，你会得到这个：

但是现在我还想在你悬停在图像上时对图像进行叠加。像这样：

我的CSS目前看起来像这样：

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

但我真的不知道如何创建彩色叠加层。有人可以帮我这个吗？

Answer 1

通过稍微改变一下，你可以相当容易地做到这一点。

只需为null类添加背景颜色，然后降低图像本身的不透明度。

.reserved_inner

＆＃13;

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
     background: #a00; /* add a background color here */
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
     opacity: .5; /* Lower the image opacity here */
}

＆＃13;

$('.reserved__inner').on({
    mouseenter: function() {
        $(this).find('h3').addClass('black');
        $(this).find('p').show();
        $(this).find('a').show();
      $(this).children('img').css({opacity: '.3'}); /* Changes image opacity */

    },
    mouseleave: function() {
        $(this).find('h3').removeClass('black');
        $(this).find('p').hide();
        $(this).find('a').hide();
      $(this).children('img').css({opacity: '.5'});/* Changes image opacity */
    }
});

＆＃13;

.reserved__inner {
    width: 100%;
    min-height: 380px;
    position: relative;
    overflow: hidden;
	 background: #a00; /* add a background color here */
}

.reserved__inner img {
    min-height: 100%;
    height: auto!important;
    min-width: 100%;
    width: auto!important;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
	 opacity: .5; /* Lower the iamge opacity here */
}

.reserved__text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 56px 54px 50px 58px;
    /*cursor: pointer;*/
}

.reserved__text h3 {
    margin-bottom: 12px;
    line-height: 35px;
}

.reserved__text h3 sup {
    font-size: 10px;
}

.reserved__text h3.first {
    color: #fff;
}

.reserved__text p {
    line-height: 24px;
    margin-bottom: 14px;
}

＆＃13;

从技术上讲，它是图像上的图像而不是图像上的颜色，但整体效果是一样的。

Answer 2

只需使用CSS。使用img从div切换到background-image: url("Your_url");，然后使用伪元素。

工作DEMO。

#img {
  width: 400px;
  height: 400px;
  background-image: url(http://lorempixel.com/400/400);
  position: relative;
}
#img:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: transparent;
  transition: all 0.5s ease 0s;
}
#img:hover:after {
  background: rgba(255, 255, 0, 0.5);
}
#img:hover > span {
  color: red;
}

<div id="img">
  <span>My text</span>
</div>

div上的颜色叠加层具有不透明度

2 个答案: