2016-12-03 79 views
2

如何編碼SCSS以在懸停時顯示左圖像。SCSS如何在鼠標懸停時顯示此結果

HTML

<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; 
      } 
     } 
     } 
    } 
} 

Example

+0

我知道你要顯示的放大鏡(放大跡象)當您hoveing在圖像上,就是你是什麼想? –

+0

是的,並在圖像上顯示藍色方塊@AbdelazizMokhnache我已經有縮放標誌圖片 –

回答

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; 
      } 
     } 
    } 
+0

您仍在使用相同的html代碼? –

+0

給我你實際的html代碼。 –

+1

哦,這是現在的作品。謝謝@ Abdelaziz Mokhnache –

相關問題