0

Could you tell me please, is there a way to do the following 2 features at the same time?

  1. The image should have a semi-transparent background
  2. The image should be scaled when on hover

Currently, I've got only one of these: either scaling without semi-transparent background or image and semi-transparent background without scaling.

.item {
  border: 1px solid red;
  width: 200px;
  height: 150px;
  overflow: hidden;
  position: relative;
}

img {
  width: 200px;
  height: 150px;
  transition: all 0.3s;
}

img:hover {
  transform: scale(1.1);
}

.blackout {
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.hover {
  position: absolute;
  top: 0;
  height: 100%;
  width: inherit;
}
<div class="item">
  <img src="https://img3.goodfon.com/original/4500x3600/4/cf/britanskaya-korotkosherstnaya-5636.jpg" alt="cat">
  <div class="hover blackout"></div>
</div>

<div class="item blackout">
  <img class="blackout" src="https://img3.goodfon.com/original/4500x3600/4/cf/britanskaya-korotkosherstnaya-5636.jpg" alt="cat">
</div>

<div class="item blackout">
    <img src="" alt="cat">
</div>
Roman Kharitonov
  • 131
  • 1
  • 9

1 Answers1

1

There are actually multiple ways to achieve what you want.

  • First, and probably the cleanest is to use the filter. blur(); property on the image you want to scale when hovered. Read the Docs Here.
  • Second is to use pointer-events: none; on your "blackout" div you put on top if the image. This will make it "transparent" to pointer-events, meaning every time you hover the "blackout" div you actually hover the image below it.
  • Third, and the way I would least recommend, although it does work, is to put your "blackout" div before the image in the DOM and then go like: .blackout:hover ~ img { transform: scale(1.1};

Hope I could help.

Note: I just read you want to make the image semi-transparent, not blurred, then use filter: opacity();

Simplicius
  • 2,009
  • 1
  • 5
  • 19