SCSSマウスのホバーでこの結果を表示する方法

Question

SCSSをコーディングすると、ホバーに左画像のようなものが表示されます。

<div class="col-md-4 col-sm-6"> 
    <div class="reference__content--item"> 
     <img src="{{ asset($reference->photo->file) }}"> 
    </div> 
</div> 

SCSS

.reference { 
    &__content { 
     margin-bottom: 30px; 
     &--item { 
     background-color: transparent; 
     img { 
      margin-top: 30px; 
      &:hover { 
       background-color: #0000AA; 
      } 
     } 
     } 
    } 
} 

Answer 1

私は通常、それが今で動作します、あなたのコードをチェックしています。

HTML：

<div class="col-md-4 col-sm-6"> 
     <div class="reference__content--item"> 
      <img src="{{ asset($reference->photo->file) }}"> 
      <div class="overlay"></div> 
     </div> 
    </div> 

SCSS：

.reference { 
     &__content { 
      &--item { 
       position: relative; 
       display: inline-block; 
       img { 
        margin-top: 30px; 
        &:hover { 
         background-color: #0000AA; 
        } 
       } 
       .overlay { 
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0; 
        bottom: 0; 
        background-color: rgba(0, 0, 255, 0.6); 
        z-index: 9999; 
        color: white; 
        visibility: hidden; 
       } 

       // you have to use just the "&" sign instead of reference__content--item 
       &:hover>.overlay { 
        visibility: visible; 
       } 
      } 
      &--title { 
       font-size: 18px; 
      } 
     } 
    }