How do I remove the transparent side?-CodePudding

I have put in the first: the normal image Then I split each of them in Photoshop into png file. Then I put the first split images: Then the second picture: Then the others. Then I got this look: So that when I put the mouse on one of them, others disappear But the transparent aspect of the last image affects the others, How do I remove the transparent side?

Html :

<Html>
    <head>
        <title>Class 2bac svt-2</title>
        <link rel="stylesheet" href="Css.css">
    </head>
    <body>
        <center>
            <h1 >2Bac-Svt-II</h1>
            <div>
                <img src="Images/All-black&White.png" alt="All" >
                <img id="Gays" src="Images/A7meed.png" alt="All" >
                <img id="Gays" src="Images/Wahid.png" alt="All" >
                <img id="Gays" src="Images/3azi.png" alt="All"Class="3azi">
                <img id="Gays" src="Images/3chir Piza.png" alt="All"Class="3chir piza">
                <img id="Gays" src="Images/Joker Dial Maryoula.png" alt="All" >
                <img id="Gays" src="Images/Mister.png" alt="All" >
                <img id="Gays" src="Images/Piza.png" alt="All" >
                <img id="Gays" src="Images/Naser.png" alt="All" >
                <img id="Gays" src="Images/Nasiri.png" alt="All" >
                <img id="Gays" src="Images/Taha.png" alt="All" >
                <img id="Gays" src="Images/Jawad.png" alt="All" >
                <img id="Gays" src="Images/Hedaya 3ad Lmath.png" alt="All" >
                <img id="Gays" src="Images/Hamoudo.png" alt="All" >
                <img id="Gays" src="Images/Himi.png" alt="All" >
                <img id="Gays" src="Images/Balon.png" alt="All" >
                <img id="Gays" src="Images/M5inzaaaaa.png" alt="All" >
                <img id="Gays" src="Images/Monir.png" alt="All" >
                <img id="Gays" src="Images/Carasko.png" alt="All" >
                <img id="Gays" src="Images/Francai.png" alt="All" >
            </div>
            <label>Zoom 100% !!!! </label>
        </center>
    </body>
</Html>

Css :

body{
    background-color: black;
}
.title{
    color: white;
    font-family: fantasy;
}
img[id="Gays"]{
    height: 70%;
    display: block;
    margin-top: -518.7px;
}
.All{
    display: block;
    height: 70%;
}
label{
    color: red;
}
@media screen and (max-width:1000px){
    img[id="Gays"]{
        height: 70%;
        display: block;
        margin-top: -511.7px;
    }
}

CodePudding user response：

You can do this by using the on mouse enter event and setting the items (apart from the one hovered) to have a 'hide' class. Hide class in css will set visibility to hidden.

Then use on mouse leave event to set all to visible again

Can't show you an example with your images, but you should be able to figure it out using the below snippet that uses text instead.

// hide all elements in div apart from the one that is hovered
function hoveredFunc(ele) {
    let div = document.getElementById("div");
  let contentsOfDiv = div.getElementsByTagName("h1");
    for(let i = 0; i < contentsOfDiv.length; i  ) {
    let item = contentsOfDiv[i];
    if(ele !== item) {
        item.setAttribute("class", "hide");
    }
  }
}

// set all to visible in div
function leaveFunc() {
    let div = document.getElementById("div");
  let contentsOfDiv = div.getElementsByTagName("h1");
    for(let i = 0; i < contentsOfDiv.length; i  ) {
    let item = contentsOfDiv[i];
    item.removeAttribute("class", "hide");
  }
}

.hide {
  visibility: hidden;
}

<div id="div">
  <h1 onm ouseenter="hoveredFunc(this)" onm ouseleave="leaveFunc()">
  Test
  </h1>
  
  <h1 onm ouseenter="hoveredFunc(this)" onm ouseleave="leaveFunc()">
  Test 2
  </h1>
  
  <h1 onm ouseenter="hoveredFunc(this)" onm ouseleave="leaveFunc()">
  Test 3
  </h1>
</div>