悬停在图像上时，不透明度不适用

Question

我有问题，当我将鼠标悬停在图片上时，必须使用不透明度+叠加文字，当文字叠加时，图像不透明度无法正常工作，我在代码中做错了什么？

这是CSS代码

.grid {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 2px solid  white;
  overflow: hidden; }

  .grid:hover .text-overlay {
    display: block; }

  .grid img {
    width: 308px; }

  .grid .img-grid {
    display: block;
    position: relative; }
    .grid .img-grid:hover {
      opacity: .5; }

  .grid .text-overlay {
    text-align: center;
    position: absolute;
    width: 100%;
    top: 15px;
    z-index: 1;
    display: none;
    font-size: 18px; }

JSfiddle

Answer 1

而不是

.grid .img-grid:hover { opacity: .5; }

你应该使用

.grid:hover .img-grid { opacity: .5; }

因为当标题出现时，您会失去hover元素上的img状态

See demo

Answer 2

只需改变

 .grid .img-grid:hover {
      opacity: .5; 
}

到

.grid:hover img {
      opacity: .5; 
}