CODEWITHSUNDEEP
htmlcss
anon
anon

Reputation: 560

Hide image until hover

I've been at this a while now and can't seem to get the behavior I'm looking for.

Bare bones here is what I have:

HTML

<ul>
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

The background image url has to be done as part of the HTML because I am looping through a list of items, each item has an image property. The above image url is an example image. In actual code it is {{ item.image }}, which can only be accessed via HTML.

CSS

.preview-image {
  opacity: 1;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

This fiddle is close to what I want. I want the bg image to take up the entire li. I only want the image visible on hover of the li (or containing element). While hovering, the Title and Desc should be hidden so they do not interfere with the viewing of the image. The Button should stay visible at all times. The result I'm looking for is exactly the behavior of this fiddle, except the image is only seen on hover.

I can't just set the opacity or visibility on the li itself since it has multiple classes on it. I only want the visibility to affect the background image. I also have tried making a div and placing it inside the li, but I can't get it to fill the li space anymore. Is there a way I can do this?

Upvotes: 1

Views: 3436

Answers (2)

Grace
Grace

Reputation: 257

I'm not sure if I understood your question correctly, but try this:

 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>


.preview-image {
  opacity: 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: white;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

EDIT: Try this then:

.preview-image {
  background-image: none;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg); height: 100px;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: black;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
 <ul class="nopadding">
<div class="container">
    <li class="preview-image">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

EDIT: Without background-image in CSS:

.preview-image {
  background-size: 0 0;
  width: 100vw;
}
.nopadding {
  padding: 0!important;
} 
.container:hover .preview-image {
  opacity: 1;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100px;
}
.container:hover .txt-container {
  opacity: 0;
}
.txt-container {
  opacity: 1;
  font-weight: bold;
  color: black;
}
.btn {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
 <ul class="nopadding">
<div class="container">
    <li class="preview-image" style="background-image:url(https://www.w3schools.com/Html/pic_trulli.jpg);">
      <div class="txt-container">
        <a>Title</a>
        <p>Desc</p>
      </div>
      <a class="btn">Button</a>
    </li>
  </div>
</ul>

Upvotes: 2

BlackKnight
BlackKnight

Reputation: 309

Just add a class to the li tags, then you can use CSS to only display the background image on hover. Something like this:

HTML:

<li class="img-hover">
  ...
</li>

CSS:

.img-hover:hover {
   background-image: url("https://www.w3schools.com/Html/pic_trulli.jpg");
 }

Upvotes: 0

Related Questions