change brightness of image on hover

Question

<div class="account_image">
    <img src="img/profile_p.jpg" class="profile_picture">
    <div class="t_overlay">
    CHANGE AVATAR
    </div>
</div>

.profile_picture{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
        margin-left: 65px;
        filter: brightness(100%);
        cursor: pointer;
}

.profile_picture:hover{
    filter: brightness(70%);
    transition: filter 0.25s ease;
}

.t_overlay{
    position: absolute;
    margin-left: 76px;
    margin-top: -43px;
    font-size: 10px;
    height: 0px;
    width: 0px;
    line-height: 1.2;
    -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
    cursor: pointer;
    opacity: 1;
    color: white;
}

.t_overlay:hover profile_picture{
    filter: brightness(70%);
}

I have a code that if you hover over an profile picture it decreases brightness of profile picture to 70% percent. "CHANGE AVATAR text is in the middle of profile picture. If I hover over "CHANGE AVATAR" text, brightness of profile picture increases to 100% again but I want it to stay to 70%.

score 0 · Accepted Answer · answered Nov 10 '20 at 19:05

See the updated code below. Run the snippet.

I simply added pointer-events: none;

to .t_overlay

Here is documentation for pointer events.

.profile_picture{
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 50%;
        margin-left: 65px;
        filter: brightness(100%);
        cursor: pointer;
}

.profile_picture:hover{
    filter: brightness(70%);
    transition: filter 0.25s ease;
}

.t_overlay{
    position: absolute;
    margin-left: 76px;
    margin-top: -43px;
    font-size: 10px;
    height: 0px;
    width: 0px;
    line-height: 1.2;
    -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
    cursor: pointer;
    opacity: 1;
    color: white;
    pointer-events: none;
}

.t_overlay:hover profile_picture{
    filter: brightness(70%);
}

<div class="account_image">
    <img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg" class="profile_picture">
    <div class="t_overlay">
    CHANGE AVATAR
    </div>
</div>

change brightness of image on hover

1 Answers1