CODEWITHSUNDEEP
htmlcss
user19609
user19609

Reputation: 11

Hover Box Color and Image Opacity

I have an image and text below it wrapped in one "a" tag. Hovering over the white box with text in it turns the box grey. Hovering over the image and it has an opacity effect.

How can I make the box turn grey and the image opacity happen at the same time when hovered over. At the moment these happen seperately. This is not a huge problem but it'd look better if they happened together.

Here's a screenshot - https://imgsafe.org/image/ef3964b27c

This is my HTML;

<div class="w3-third w3-container w3-margin-bottom">
  <a href="#" style="display:block">
    <img src="Images/MCR.png" style="width:100%" class="w3-hover-opacity">
    <div class="w3-container w3-white">
      <p><b>PSB2 and COM4</b></p>
      <p><b>&nbsp;</b></p>
    </div>
  </a>
</div>

Upvotes: 0

Views: 1184

Answers (4)

RaJesh RiJo
RaJesh RiJo

Reputation: 4400

Try to put you image and text into a single container and add simple transition. check below snippet.

.img-container {
  width: 250px;
  border: 2px solid blue;
}

.img-container p {
  padding: 10px 0;
  margin:0;
  transition: all 0.5s ease;
}

.img-container img{
  transition: all 0.5s ease;
}

.img-container:hover img {
  opacity: 0.5;
}

.img-container:hover p {
  background-color: grey;
}
<div class="img-container">
  <a href="#">
    <img src="http://via.placeholder.com/250x150" />
    <p>Some text</p>
  </a>
</div>

Upvotes: 0

Bhargav Chudasama
Bhargav Chudasama

Reputation: 7161

now try this one with edited code

.w3-white {
  margin-top: -20px;
  width: 40%;
}

.w3-container:hover img {
  opacity: 0.5;
}

.w3-container:hover .w3-white {
  background-color: grey;
}
<div class="w3-third w3-container w3-margin-bottom">
  <a href="#" style="display:block"><img src="http://webneel.com/daily/sites/default/files/images/daily/09-2013/1-diwali-greetings.preview.jpg" style="width:40%" class="w3-hover-opacity">
    <div class="w3-container w3-white">
      <p><b>PSB2 and COM4</b></p>
      <p><b>&nbsp;</b></p>
    </div>
  </a>
</div>

Upvotes: 0

Ehsan
Ehsan

Reputation: 12959

Try This:

.w3-third {
    border: 5px solid lightgreen;
    display: inline-block;
    position: relative;
    text-align: center;
}

p {
    margin: 0;
}

a {
    color: #000;
    text-decoration: none;
}

.w3-third:hover .w3-white {
    background-color: gray;
}

.w3-third:hover img {
    opacity: 0.2;
}
<div class="w3-third w3-container w3-margin-bottom">
    <a href="#" style="display:block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEnn9dYYZlciBKfaHCw17-dUgRPX3nq5_6-kV1ua-LIsId5g43uA">
    <div class="w3-container w3-white">
        <p><b>PSB2 and COM4</b></p>
        <p><b>&nbsp;</b></p>
    </div></a>
</div>

Upvotes: 0

Carl Binalla
Carl Binalla

Reputation: 5401

Since your snippet is different from the image you provided, I created a simple snippet that changes the opacity of the image and changes the border color (if that is what you mean by box) to gray

.wrapper {
  height: 200px;
  width: 250px;
  border: 3px solid green;
}
.wrapper:hover {
  border: 3px solid gray;
}
.wrapper:hover img {
  opacity: 0.5;
}
<div class="wrapper">
  <a href="#">
    <img src="http://via.placeholder.com/250x150" />
  </a>
</div>

Upvotes: 1

Related Questions