How to show an image on the right side of the screen (split screen) when I hover over a text from th-CodePudding

I am a complete newbie to coding. I started only yesterday with the very basics of HTML and CSS. So please excuse my question if it seems silly.

I want to create a split screen with the screen on the left side (WHITE background) showing a list of my favorite artists. When I hover over 1 artist's name, I want 1 image of their artwork to appear on the right side (RED background) of the screen, and then disappear once I remove my mouse pointer. I want the same effect to occur when I hover over every artist's name in the list.

I also want each name of the artist to be a text with hyperlink directing me to their social media page when I click on it (I have this figured out already though, it's just the hovering part described above that I'm having trouble with).

Right now, the picture does show up when I hover over an artist's name, but it shows only on the left side and not fully. As mentioned, I want the picture to show on the right side only, large enough to fit the entire right side without cropping any part of the image.

My code so far is shown below, many of which I just copied pasted from various tutorials/sources online (it's probably messy, I don't know how to tell).

Ideally, the final result would look something like this: https://imgur.com/a/Keo5tHd

Can anyone please help? I'm excited to learn coding now because I have a practical problem I want to solve (this list I'm trying to make), which motivates me to keep looking for solutions and keep learning.

img{
               display: none
            }

            span:hover   img{
               display: block;
            }


        /* Split the screen in half */
        .split {
          height: 100%;
          width: 70%;
          position: fixed;
          z-index: 1;
          top: 0;
          overflow-x: hidden;
          padding-top: 20px;
        }

        /* Control the left side */
        .left {
          left: -300;
          background-color: #FFFFFF;
          width: 63%;
          height: 20%;
        }

        /* Control the right side */
        .right {
          right: 0;
          background-color: #FF1111;
          
        }

        /* If you want the content centered horizontally and vertically */
        .centered {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: left;
        }

        /* Style the image inside the centered container, if needed */
        .centered img {
          border-radius: 0;
}

<div >
          <div >
            
            <h2>My favorite artists</h2>
            
                    <a href="https://www.twitter.com/rinotuna" target="_blank"> <span>Artist 1: Rinotuna</span>
                    <img src="https://pbs.twimg.com/media/FIGzZZnakAEV90i?format=jpg&name=small"/><br></a>
                    
                    <a href="https://www.twitter.com/WLOP" target="_blank"> <span>Artist 2: WLOP</span>
                    <img src="https://pbs.twimg.com/media/FKpRYQIVcAMvPlA?format=jpg&name=small"/><br></a>
            
            
          </div>
        </div>

        <div >
          <div >
            
            
            
            
            
            
          </div>
        </div>

CodePudding user response：

There are various ways to achieve the layout. Following is one of them. I've used only basic CSS rules.
To know how it works search any of the CSS properties on MDN web docs. It is the most exhaustive developer friendly documentation.

For better understanding click on "Full page" link on top left, after you run following snippet. And open Developer console to understand the elements.

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

main {
  height: 100%;
  width: 100%;
  position: relative;
}

.left {
  padding-left: 1rem;
  width: 30%;
  height: 100%;
  background-color: wheat;
  float: left;
}

.right {
  padding: 1rem;
  float: right;
  width: 70%;
  height: 100%;
  background-color: #FF1111;
}

.right>p {
  margin: 0;
  font-weight: bolder;
  font-size: 1.2rem;
  color: rgb(255, 208, 255);
  writing-mode: vertical-lr;
  text-orientation: upright;
}

img {
  visibility: hidden;
  position: fixed;
  top: 2.5rem;
  right: 10%;
  width: 50vw;
  height: 90vh;
  object-fit: contain;
  z-index: 100;
}

span:hover img {
  visibility: visible;
}

<main>
  <div >
    <h2>My favorite artists</h2>
    <a href="https://www.twitter.com/rinotuna" target="_blank"> <span>Artist 1: Rinotuna</span>
      <img src="https://pbs.twimg.com/media/FIGzZZnakAEV90i?format=jpg&name=small" /><br></a>
    <a href="https://www.twitter.com/WLOP" target="_blank"> <span>Artist 2: WLOP</span>
      <img src="https://pbs.twimg.com/media/FKpRYQIVcAMvPlA?format=jpg&name=small" /><br></a>
  </div>

  <div >
    <p>Art Gallery</p>
  </div>
</main>

CodePudding user response：

Incidentally, this is not a stupid question at all, you have just started learning. First of all, I advise you to consider a separate <div> tag for each name and photo so that you do not have trouble figuring out the location of the components. Secondly, creating this mini-project is possible with Flexbox or CSS Grid or JavaScript and it becomes very difficult with simple CSS. Please start with easier mini-projects. I'm eager to do it if I can help.