How can I hide an image on a HTML page until a user hovers over it using CSS?

Question

Currently, I have a website where images are clashing with the text over it.

I'm new to HTML/CSS and have looked around online but haven't ha dmuch luck. Basically, when a user isn't hovered over a box, an image should show a bit faded with text on top. When the use is hovered over the box, the image should be?

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

could you mentally visualize the problem by simply viewing the CSS you provided? Because I cannot. — Roko C. Buljan, Jun 09 '17 at 23:33
*"When the use is hovered over the box, the image should be?"* should be what? — Michael Coker, Jun 09 '17 at 23:40
it's a guessing game from your description, but are you trying to do something like this? https://codepen.io/anon/pen/MoKZMa — Michael Coker, Jun 09 '17 at 23:45
@MichaelCoker yes, basically that but the other way around... if that makes sense. Where unhovered = original image, hovered = faded image with text on top — Julian Castaneda, Jun 12 '17 at 20:28

Ricky Dam · Answer 1 · 2017-06-10T01:38:43.520

This is the best I could do with the info you have provided.
Hopefully it is helpful to you.

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

score 1 · Answer 2 · answered Jun 09 '17 at 23:43

I'm not sure of those classes, but considering the description of your problem, here's what you can probably do:-

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

    opacity: 1;

 }

Hope that helps :) Please correct me if I misunderstood your point.

score 1 · Answer 3 · answered Jun 09 '17 at 23:47

One possible solution is to set the image as the background of a div, then nest another div inside of it that matches the width and height of the image div.

Add a background color with opacity to that inside div, and your text, then set it to invisible when hovered over.

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

Ehsan · Answer 4 · 2017-06-10T03:52:25.613

Try this:

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

score 1 · Answer 5 · answered Jun 12 '17 at 20:33

You can nest the text in an element that wraps the image, then on :hover alter the opacity of the image and the text to hide/show.

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

How can I hide an image on a HTML page until a user hovers over it using CSS?

5 Answers5