使图像变暗并在悬停时显示文本

Question

我试图创建一种效果，当我将鼠标悬停在图像上时，图像变暗（因此不透明度降低）并出现文本。效果基本上是这样的： http://www.ohmy.io/ 。我可以自己做其中一种效果，但同时做这两种效果时，它们几乎是在互相争斗，然后变暗半秒钟，然后背光。

.vividworknav {
  width: 33.333%;
  height: auto;
  float: left;
  padding: 0;
  -webkit-transition: opacity 0.5s ease-out;
  -moz-transition: opacity 0.5s ease-out;
  -o-transition: opacity 0.5s ease-out;
  transition: opacity 0.5s ease-out;
}
.vividworknav:hover .work-text-content {
  visibility: visible;
  opacity: 1.0;
}
.vividworknav:hover {
  opacity: 0.3;
}
.work-text-content {
  width: 33.333%;
  height: auto;
  visibility: hidden;
  z-index: 100;
  position: absolute;
  color: white;
  left: 0%;
  top: 25%;
  font-size: 24px;
  text-align: center;
  -webkit-transition: visibility opacity 2.0Ms;
}

<div class="vividworknav">
  <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
  <div class="work-text-content">
    <p>VIVID VAPOURS</p>
  </div>
</div>

Answer 1

        .vividworknav{
            width:33.333%;
            height:200px;
            float:left;
            padding:0;
            -webkit-transition: opacity 0.5s ease-out;
            -moz-transition: opacity 0.5s ease-out;
            -o-transition: opacity 0.5s ease-out;
            transition: opacity 0.5s ease-out;
            background-image: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
        }

        .vividworknav:hover .work-text-content{
            opacity: 1.0;
        }

        .work-text-content{
            background-color: rgba(0,0,0,0.8);
            width:33.333%;
            height:100%;
            opacity: 0;
            z-index:100;
            position:absolute;    
            color:white;
            left:0%;
            font-size:24px;
            text-align:center;
           -webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
           -moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
           -o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); 
            transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
       -webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
       -moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); 
  -o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);   
  transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
        }

Answer 2

我给父元素 vividworknav 添加了黑色背景，然后我只是设置了鼠标悬停时图像和文本的不透明度，然后它似乎工作正常。

    .vividworknav {
      width: 33.333%;
      height: auto;
      float: left;
      padding: 0;
      position: relative;
      background-color: black;
    }

    .vividworknav:hover img {
      opacity: 0.3;
    }

    .vividworknav:hover .work-text-content {
      opacity: 1; 
    }

    .vividworknav img {
      padding: 0;
      width: 100%;
      display: block;
      opacity: 1;
    }

    .vividworknav img,
    .work-text-content {
      -webkit-transition: opacity 0.5s ease-out;
      -moz-transition: opacity 0.5s ease-out;
      -o-transition: opacity 0.5s ease-out;
      transition: opacity 0.5s ease-out;
    }

    .work-text-content {
      position: absolute;
      color: white;
      left: 0;
      top: 25%;
      right: 0;
      bottom: 0;
      font-size: 24px;
      text-align: center;
      opacity: 0;
    }

<div class="vividworknav">
  <img src="http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg" />
  <div class="work-text-content">
    <p>VIVID VAPOURS</p>
  </div>
</div>

使图像变暗并在悬停时显示文本

Make an image go dark and text appear when hovered over

html

css

opacity