Text hover to image with multiple columns and fixed image in center- mouseover

Question

I've been struggling with a problem that I know the right person can easily fix in one shot.

I need to create something similar to this site:

http://www.arcadiacontemporary.com/artists/index.php

However I need multiple artist columns/tables like this site:

https://collinsgalleries.com/ARTISTS5.html

I would like the mouseover to work the same however when it grabs the image, I would rather be able to use external files and URLs vs internal.

Both site uses jquery and bootstrap, which I need to integrate into a Wordpress website. I do not know jquery or bootstrap js so I'm trying my best to create it without.

The best I've got so far for code is:

HTML

<!DOCTYPE html>
<html>
<head>

<style>
table, th, td {
  border: 0px solid black;
    padding: 5px;

}
table {
  border-spacing: 15px;
  ]
    </style>
    </head>
    <body>
        
 <a href="#"><div class="hover-img">
  <table style="width: 100%"></table>
  <th>Artist Name</th>
  </tr>
   <span><img src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="fixed" />      </span>
</div></a>
<a href="#"><div class="hover-img">
    <tr>
    
    <th>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg" alt="image" height="fixed" />      </span>
</div></a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg" alt="image" height="fixed" />      </span>
</div>
</a>
 <a href="#"><div class="hover-img">
    <td>Artist Name</td>
   <span><img src="https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg" alt="image" height="fixed" />      </span>
   


   </table>
   
   </body>
</html>

then CSS

a .hover-img { 
  position:static;
 }
a .hover-img span {
  position:absolute; left:-9999px; top:-9999px; z-index:9999;
 }
a:hover .hover-img span { 
  top: 1vw; 
  left:18vw;
 }
 
 
 
td {
  display: table-cell;
  vertical-align: inherit;
}

The issue with this code is - The images aren't don't size the same in the middle. if I add a 3rd line the formatting breaks. And this needs to be mobile responsive as well.

I am open to all suggestions. Thank you in advance

JonoJames · Accepted Answer · 2021-01-06T05:18:36.650

Ok Firstly the reason you would use bootstrap is that it caters for both Mobile and desktop screen sizes without having to run any additional boilerplate code to resize the site for the browser ...

jquery is not necessary to achieve your goal but pure Vanilla JavaScript is .

This is how I would approach it

In the first instance I would replace the table component with a Layout called a flex box This would make your code easier to read and will dynamically lay itself out ...If you would like to read up further on flex box CSS styles here is the link Flex Box
The Second thing is I would write a simple JavaScript function to change the image onMouseOver .In order to give the JavaScript engine a handle to the DOM image component you need to allocat and "id" to it . Then you can use let ObjName = document.getElementById('YourHtmlObject'). after that you can manipulate it with JS
I would use one image container and dynamically append the image source based on the artist Through a switch statement in JavaScript function
In order to get the image to zoom or scale onMouseover again I would simply place a CSS animation to do that

Vanilla JavaScript in your case would make your life allot simpler . It would be a good idea to learn the basics of it ... I have provided some code that should simplify the solution for you ... Let me know if you find this useful or need any further help

enjoy!

function ChangeImage(artistName) {


  let img = document.getElementById('TheImage');

  switch (artistName) {

    case 'Rob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Old_Friends.jpg';
      break;
    case 'Amy':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_Beds.jpg';
      break;
    case 'Bob':
      // code block
      img.src = 'https://collinsgalleries.com/images/Paul_Oxborough_MacBeth-frame.jpg';
      break;
    case 'Clare':
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';
      break;
    default:
      // code block
      img.src = 'https://collinsgalleries.com/images/Artist-Page-Monks.jpg';

  }

}

.app-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.leftcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.rightcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.midcontainer {
  flex-direction: column;
  justify-content: space-evenly;
}

.zoom {
  transition: transform .2s;
  /* Animation */
}

.zoom:hover {
  transform: scale(1.5);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
  /* position:absolute;
      right:0;*/
}

#TheImage {
  transition: transform .2s;
}

<div class="app-container">


  <div class="leftcontainer">

    <div class="app-container">

      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>


      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>

    </div>
  </div>

  <div class="midcontainer">
    <span><img id='TheImage'  class='zoom'  src="https://collinsgalleries.com/images/Artist-Page-Monks.jpg" alt="image" height="300px"  width="300px"/>      </span>
  </div>

  <div class="rightcontainer">
    <div class="app-container">
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
      <ul style="list-style: none;">
        <li onmouseover="ChangeImage('Rob')">Rob</li>
        <li onmouseover="ChangeImage('Amy')">Amy</li>
        <li onmouseover="ChangeImage('Bob')">Bob</li>
        <li onmouseover="ChangeImage('clare')">Clare</li>
      </ul>
    </div>
  </div>

</div>

Hi JonoJames- I was just looking into a flex box prior to seeing your response for spacing. The space-evenly helps immensely. This worked perfectly! thank you for the help and quick response. — Sara Klosterman, Jan 06 '21 at 04:40
I have added the code and it works. I am looking to 2 inner columns through flexbox using a new div class I've created called .leftmidcontainer & .rightmidcontainer with the flex-direction : column however it is putting all the words inline versus creating a separate column. I looked at this and was following the editor and haven't got it to work just yet. The look I am going for is on https://collinsgalleries.com/ARTISTS.html which you will see has more artists listed, but I'd only sent the simple code as an example. — Sara Klosterman, Jan 06 '21 at 04:57
You could do that or even nest a table in the flexbox container ..set min width to a flex column what happens when you make the screen tiny it pushes the columns under each other like in rows ... good for mobile support . but you also have to test the effect by resizing the screen — JonoJames, Jan 06 '21 at 05:03
Ok I see what you trying to do ... Just double nest the
in another app-container to give you the inner row affect on the outer columns .... I updated the answered solution wit hthe change — JonoJames, Jan 06 '21 at 05:20
Yes that fixed it. I wasn't sure to make another div class, but using the ul style in app-container worked. I will be able to everything else with image replacement names, and hyperlinks to pages now. Thank you again @JonoJames !!! — Sara Klosterman, Jan 06 '21 at 05:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/226929/discussion-between-sara-klosterman-and-jonojames). — Sara Klosterman, Jan 06 '21 at 14:14

Text hover to image with multiple columns and fixed image in center- mouseover

1 Answers1