-1

I need help to increase the Opacity of the Image displayed while hovering over a text. But, when done as below the background text is also being displayed. Screenshot below.

I do not want to see the background text.

Below is the code

 <div class="hover-title">Image1 Hover Test<br>
<br>
</div>
<div class="hover-image">{image 1}</div>

CSS

.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    display: none;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    display: flex;
    pointer-events: none;
}

.hover-image {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width: 90vw;
    height: 90vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}

Before Hovering:

enter image description here

After Hovering:

enter image description here

Anurag Srivastava
  • 14,077
  • 4
  • 33
  • 43
Aech
  • 1

2 Answers2

1

You need both, the prior z-index, is to move something from back to front.

Later to change the opacity, you can add a color layer over the image by using this:

background-color: rgba(7,52,76,.5);

Needs to be RGB to be translucent.

Here's more on that: How to overlay image with color in CSS?

I hope this helps

DefaultWorkgr0up
  • 21
  • 3
0

In css change the z-index of .hover-image to 2.

Gourav Saini
  • 632
  • 6
  • 11