Bonsoir


Je réalise une apparition d images au survol d un élément ou plutôt un mot

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
  <div class="main">
 
<div class="mouse"></div>
    <ul>
      <li>frame
        <img src="https://images.unsplash.com/photo-1711677371698-4496b754c4b1?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>vertical
        <img src="https://images.unsplash.com/photo-1711098288630-30b69a86be92?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="pieds">
      </li>
      <li>board
        <img src="https://images.unsplash.com/photo-1712187466004-c64b4571828b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1MDN8&ixlib=rb-4.0.3&q=85" class="pic" alt="femme">
      </li>
      <li>popular
        <img src="https://images.unsplash.com/photo-1711109631427-f90f9d83364b?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="couple">
      </li>
      <li>trends
        <img src="https://images.unsplash.com/photo-1711861399198-649bc0ddc33f?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="architecture">
      </li>
      <li>brand
        <img src="https://images.unsplash.com/photo-1713623633904-a0a8dca6fafc?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU1NzF8&ixlib=rb-4.0.3&q=85" class="pic" alt="paysage">
      </li>
      <li>almost
        <img src="https://images.unsplash.com/photo-1712181938400-a76d207d4fcb?crop=entropy&cs=srgb&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3MTM5MDU2NzF8&ixlib=rb-4.0.3&q=85"  class="pic"  alt="femme africaine">
      </li>
    </ul>
 
  </div>
 
 
 
</body>



Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
*,*::before,*::after{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
*{
    font-size: 16px;
    font-family: verdana;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: #151316;
    display: grid;
    place-items: center;
}
 
::-webkit-scrollbar{
    display: none;
}
 
 
.main{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
   overflow: hidden;
}
 
ul{
    height: 60vmin;
}
 
 
ul li{
    color: #3a3a3a;
    text-transform: capitalize;
    font-size: 6vw;
   font-weight: 600;
    list-style: none;
    text-align: center;
    letter-spacing: 3px;
 }
 
img{
    display: block;
    width: 350px;
    height: 400px;
    object-fit: cover;
 
}
 
.pic{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity:0;
    pointer-events: none;
}
 
.mouse{
    width: 60px;
    height: 60px;
    background-color: #d7d98d;
    border-radius: 100px;
    position: absolute;
    transition: transform  .3s;
}
 
 
.appear{
    opacity: 1;
}


et enfin


Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 const souris=document.querySelector('.mouse');
    const mots=document.querySelectorAll('li');
    const pic=document.querySelector('.pic');
    console.log(pic);
 
    window.addEventListener("mousemove",(e)=>{
     console.log(e);
     souris.style.left=e.pageX - souris.offsetWidth/2 + "px";
     souris.style.top=e.pageY - souris.offsetHeight/2 + "px";
    })
 
    mots.forEach(element => {
       element.addEventListener("mouseenter",()=>{
        pic.classList.toggle('appear')
       })
 
       element.addEventListener("mouseout",()=>{
       pic.classList.toggle('appear')
      })
});

je n'obtiens rien puis je avoir des pistes pour transcender cet aspect de problème ?

Merci