如何在 HTML 页面上隐藏图像，直到用户使用 CSS 将鼠标悬停在它上面？答案

【问题标题】：How can I hide an image on a HTML page until a user hovers over it using CSS?如何在 HTML 页面上隐藏图像，直到用户使用 CSS 将鼠标悬停在它上面？
【发布时间】：2017-06-09 23:28:34
【问题描述】：

目前，我有一个网站，其中图像与上面的文字发生冲突。

我是 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%));
        }
    }
}

【问题讨论】：

你能通过简单地查看你提供的 CSS 来想象这个问题吗？因为我做不到。
"当使用鼠标悬停在框上时，图片应该是什么？"应该是什么？
根据您的描述，这是一个猜谜游戏，但您是否要尝试这样做？ codepen.io/anon/pen/MoKZMa
@MichaelCoker 是的，基本上是这样，但反过来……如果这有意义的话。其中未悬停 = 原始图像，悬停 = 顶部带有文本的褪色图像
@JulianCastaneda 罗杰。已提交答案。

标签： html css hover shopify

【解决方案1】：

这是我能用你提供的信息做的最好的事情。
希望对您有所帮助。

#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>

【讨论】：

【解决方案2】：

我不确定这些类，但考虑到您对问题的描述，您可能可以这样做：-

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

    opacity: 1;

 }

希望对您有所帮助 :) 如果我误解了你的观点，请纠正我。

【讨论】：

【解决方案3】：

一种可能的解决方案是将图像设置为 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：