I'd like to know how these two codes work so I can put them on my forum.

For your first question I'm gonna post a link to a topic were Ange Tuteur created that kind of widget.
https://help.forumotion.com/t136908-hover-staff-list#924551


For your second question you can try using this html and css:

Code:

<a style="background: transparent url(url to image) no-repeat scroll center center;" href="url to page" class="widget-link"></a>

Code:

.widget-link:hover {
    border-width: 0px 5px;
    filter: grayscale(0);
}
.widget-link {
    width: 150px;
    height: 54px;
    display: block;
    border-width: 0px 2px;
    border-style: solid;
    border-color: green;
    box-sizing: border-box;
    filter: grayscale(1);
    transition: 0.1s;
}

i think the first effect will be created by using the following code, hope this helps

Code:

<div id="staffList">
                                                                                                                                                                                                                                                                                                                                              
   <div id="mainBlock">
<img id="mainImage" src="insert link of image here that you see before you hover the little images like you show up here">                                                                                                                                                                   
   </div>
                                                                                                                                                                                                                                                                                                                                  
   <div id="mainBlock">
                                                                                                          <br>                                                      <br>                                                                                                                                                           
   </div>
                                                                                                                                                                                                                                                                                                                        
   <br><br><br><br><br>
                                                                                                                                                                                                                                                                                                                        
   <div id="staffList">
                                                                                                                                                                  <strong><span style="font-size: 13px;">ADMINISTRATOR</span></strong>                                                                                                                                                           
   </div>
                                                                                                                                                           <a href="/u3358">    <img alt="link of image you want to appear at the top when hovering small image" src="link of the small image"></a><br>

</div>

at line 11, (maybe you need to add more of <br> depending on how big the above image is , to make the other images get in a proper position below the above image)

where it says /u3358, replace that with the links of users profiles on your forum

to add more images/users after this one^^^, all you have to do is repeat the same thing over again = copy this part and add below the first one

Code:

<strong><span style="font-size: 13px;"><span style="text-decoration: underline;">ADMINISTRATOR</span></span></strong>                                                                                                                                                         
  </div>
<a href="/u3358">    <img alt="link of image you want to appear at the top when hovering small image" src="link of the small image"></a>

also you need to add a javascript

Code:

<script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>


edit; apparently i was too slow lol

@pebbles I think the codes you guys gave me isn't compatible with my forum. I have phpBB2

Kamui wrote:@pebbles I think the codes you guys gave me isn't compatible with my forum. I have phpBB2

do you know where to add the javascript? its at modules and then Javascript codes management

and just try and add the above in a new widget