如何在HTML頁面上隱藏圖像，直到用戶使用CSS懸停在圖像上？

Question

目前，我有一個網站，圖像與文字衝突。

我是HTML/CSS的新手，已經在網上看了一圈，但沒有很好運。基本上，當一個用戶沒有被懸停在一個盒子上時，圖像應該顯示有點淡化，並且頂部有文字。當使用方式懸停在盒子上時，圖像應該是？

.showcase { 
overflow: hidden; 
margin-left: -1px; 

@include flexbox; 
@include justify-content(center); 
} 

.custom_showcase { 
position: relative; 
padding: 1px 0 0 1px; 
@include flexbox; 

img { 
    width: 100%; 
    max-width: none; 
} 
.inside { 
    display: inline-block; 
    max-width: 100%; 
    width: 100%; 
    background: $color_1; 

    @include flexbox; 
    @include align-items(center); 
} 
.textblock { 
    padding: 20px; 
} 
img + .textblock { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 100%; 
    max-width: 455px; 
    padding: 0 20px; 
    color: $color_3; 
    @include transform(translate(-50%,-50%)); 
} 
h2 { 
    color: $color_3; 
    margin: 16px 0 5px; 
    text-transform: uppercase; 
} 
p { 
    margin: 0; 
    color: $color_3; 
} 
h2, 
p { 
    span { 
     display: inline-block; 
     padding-left: 0; 
     @include transition(.4s); 
    } 
} 

.text { 
    width: 100%; 
} 

.btn_wrapper { 
    position: absolute; 
    right: 40px; 
    top: 50%; 
    @include transform(translate(0%,-50%)); 

    .btn { 
     padding: 0 10px; 
     min-width: 140px; 
     text-align: center; 
     opacity: 0; 
     @include transition(.4s); 
     @include transform(translate(100%,0%)); 
/*   border-color: $color_3; */ 
    } 
} 
a:not(:hover) { 
    //h2, 
    //p { 
    // span { 
    //  padding-right: 0 !important; 
    // } 
    //} 
      opacity: .5; 
      transition: opacity 0.5s ease; 
} 

a:hover { 
    h2, 
    p { 
     span { 
      padding-left: 0 !important; 
     } 
    } 
    .btn_wrapper { 
     .btn { 
      opacity: 1; 
      @include transform(translate(0%,0%)); 
     } 
    } 
} 

Answer 1

我不知道這些類的，但考慮到你的問題的描述，這裏就是你大概可以做到： -

.image-class { 
    opacity: 0.4; 
    /*This is optional*/transition: opacity 0.5s; 
} 
.image-class:hover { 

    opacity: 1; 

} 

希望幫助:) 如有指正我誤解了你的觀點。

Answer 2

一種可能的解決方案是將圖像設置爲div的背景，然後將另一個div嵌入其中，以匹配圖像div的寬度和高度。

爲不透明度的背景顏色添加div和文字，然後在懸停時將其設置爲不可見。

.img-box { 
 
    background: url('http://sierranewsonline.com/wp-content/uploads/2016/07/Virginia-Eaton-July-2-SNOL-Nightshade-lycianthes-rantonnetii-10404.jpg'); 
 
    background-position: top center; 
 
    width: 350px; 
 
    height: 350px; 
 
} 
 
.text-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(255,255,255,0.5); 
 
    text-align: center; 
 
} 
 
.text-overlay:hover { 
 
    opacity: 0; 
 
} 
 
.text-centered { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding-top: 32px; 
 
}

<div class="img-box"> 
 
    <div class="text-overlay"> 
 
    <span class="text-centered">Hover over the Image</span> 
 
    </div> 
 
</div>

Answer 3

這是我能和您所提供的信息做到最好。
希望它對你有幫助。

#theBox { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid black; 
 
} 
 

 
#octocat { 
 
    width: 185px; 
 
    opacity: 0; 
 
} 
 

 
#octocat:hover { 
 
    opacity: 1; 
 
}

<div id="theBox"> 
 
    <center> 
 
    <span> Mr. Octocat right down here. </span> 
 
    <br> 
 
    <img id="octocat" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg"> 
 
    </center> 
 
</div>

Answer 4

試試這個：

#box { 
 
    width: 300px; 
 
    position: relative; 
 
} 
 

 
.imgDiv { 
 
    margin: 0; 
 
    opacity:0.2; 
 
} 
 

 
.imgDiv:hover { 
 
    opacity:1; 
 
} 
 

 
img { 
 
    width: 100% 
 
} 
 

 
span { 
 
    position: absolute; 
 
    color:#fff; 
 
    bottom: 10px; 
 
    background: #000; 
 
}

<div id="box"> 
 
    <span>Cute Animal</span> 
 
    <div class="imgDiv"> 
 
     <img src="http://www.mrwallpaper.com/wallpapers/cute-bunny-1600x900.jpg"> 
 
    </div> 
 
</div>

Answer 5

你可以窩在一個元素包裝的圖像，然後在:hover文本改變透明度的圖像和文字隱藏/顯示。

.card { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.info { 
 
    position: absolute; 
 
    top: 0; left: 0; right: 0; bottom: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 2.5em; 
 
    opacity: 0; 
 
} 
 
.card:hover .info { 
 
    opacity: 1; 
 
} 
 
.card:hover img { 
 
    opacity: .5; 
 
} 
 
img { 
 
    vertical-align: top; 
 
    max-width: 300px; 
 
} 
 
.info, img { 
 
    transition: opacity .25s; 
 
}

<div class="card"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <div class="info">some text</div> 
 
</div> 
 
<div class="card"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <div class="info">some text</div> 
 
</div> 
 
<div class="card"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> 
 
    <div class="info">some text</div> 
 
</div>