Question 227574 in Html Question posted in
Some basic documentation can be found here.

Html – Removing The Brightness Of The Txt Inside The <img>

I made the brightness for an image: filter: brightness(40%) but I made a overlay with text that’s in the center of the image and I want the text to have a normal brightness (unlike the image).

Can anyone help me make the Instagram icon have a normal brightness?

.instacont {
  filter: brightness(40%);
  width: 250px;
  display: flex;
}

.insta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(100%);
  color: white;
  font-size: 23px;
  text-align: center;
}

#seimg {
  width: 287px;
  display: flex;
  margin-left: -5px;
}

.insta {
  display: flex;
  width: 287px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<div class="insta-container">
  <div class="instacont">
    <img class="insta" src="https://i.pinimg.com/736x/2c/fc/71/2cfc71b0af14a2d2a20fe8048f3bd8ef.jpg">
    <div class="overlay"><i class="fab fa-instagram fa-2x" style="color: #ffffff;" id="instaicon"></i></div>
  </div>
</div>
Tags:

2

Answers


  1. 0

    With the following part of your css, you put a filter on all the elements with class instacont, and implicitly everything inside of it as well:

    .instacont {
  filter: brightness(40%);
  width: 250px;
  display: flex;
}

    You can put the filter on just the element you want filtered directly.

    Move the filter: brightness(40%); to .insta instead:

    .instacont {
  width: 250px;
  display: flex;
}

.insta-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 23px;
  text-align: center;
}

#seimg {
  width: 287px;
  display: flex;
  margin-left: -5px;
}

.insta {
  filter: brightness(40%);
  display: flex;
  width: 287px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<div class="insta-container">
  <div class="instacont">
    <img class="insta" src="https://i.pinimg.com/736x/2c/fc/71/2cfc71b0af14a2d2a20fe8048f3bd8ef.jpg">
    <div class="overlay"><i class="fab fa-instagram fa-2x" style="color: #ffffff;" id="instaicon"></i></div>
  </div>
</div>

    The filter: brightness(100%); in .overlay is not needed and can be removed.

    Login or Signup to reply.
  2. 0

    Switch the filter from the instacont element to just the image element.

    Small further note: at the moment your positioning for the icon is off. If you use display: flex on the overlay you can then center it properly with justify-content and align-items. You can also remove one layer of nesting by setting the container to use relative positioning.

    (I’ve renamed the classes in this updated example to make it a little more explanatory.)

    .container {
  position: relative;
  width: fit-content;
}

.overlay {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  font-size: 23px;
}

.image {
  filter: brightness(40%);
  width: 250px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<div class="container">
    <img class="image" src="https://i.pinimg.com/736x/2c/fc/71/2cfc71b0af14a2d2a20fe8048f3bd8ef.jpg">
    <div class="overlay"><i class="fab fa-instagram fa-2x" style="color: #ffffff;" id="instaicon"></i></div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search