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

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

＆＃13;

#theBox {
  width: 200px;
  height: 200px;
  border: 2px solid black;
}

#octocat {
  width: 185px;
  opacity: 0;
}

#octocat:hover {
  opacity: 1;
}

＆＃13;

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

＆＃13;

Answer 2

我不确定那些课程，但考虑到你的问题的描述，这是你可以做的： -

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

    opacity: 1;

 }

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

Answer 3

一种可能的解决方案是将图像设置为div的背景，然后在其中嵌套另一个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 4

试试这个：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以将文本嵌套在包装图像的元素中，然后在:hover上更改图像的不透明度和要隐藏/显示的文本。

＆＃13;

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

＆＃13;

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

＆＃13;

如何在用户使用CSS将鼠标悬停在HTML页面上之前隐藏图像？

5 个答案: