0

I'm creating a page with four images, but i'd like each image to change when i hover over each image. I'm trying to get '' to appear exactly over ''. The hover image is in a different position than i'd expect. It's a mess and I don't know what to do. can anyone help:

Best wishes

Dan.

    <style>
        #topbar {
        width: 1320px;
        margin: 0 auto;
        height: 140px;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: Engravers MT;
      }

      #lines {
        margin-top: 35px;
        margin-left: 35px;
        float: left;
      }

      #walrus-text {
        font-weight: bold;
        font-size: 400%;
        position: relative;
        top: 15px;
        padding: 340px;
      }

      #beatles-text {
        font-weight: bold;
        font-size: 90%;
        position: relative;
        top: 15px;
        padding: 485px;
      }

      #facebook {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: -400px;
        bottom: 50px;
        height: 37px;
      }

      #twitter {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: -280px;
        bottom: 69px;
        height: 37px;
      }

      #spotify {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: -152px;
        bottom: 70px;
        height: 37px;
      }

      #youtube {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: -24px;
        bottom: 74px;
        height: 47px;
      }

      #itunes {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: 106px;
        bottom: 68px;
        height: 36px;
      }

      #email {
        margin-top: 35px;
        margin-left: 35px;
        float: right;
        position: relative;
        left: 236px;
        bottom: 66px;
        height: 33px;
      }

      #page-container {
        width: 1000px;
        margin: 0 auto;
      }

      #fabfour {
        width: 1320px;
        margin: 0 auto;
        height: 740px;
      }

      #beatle-george {
        width: 350px;
        position: relative;
        left: 280px;
      }

      #beatle-paul {
        width: 350px;
        height: 350px;
        position: relative;
        left: 280px;
      }

      #beatle-john {
        width: 350px;
        height: 350px;
        position: relative;
        left: 280px;
      }

      #beatle-ringo {
        width: 350px;
        height: 350px;
        position: relative;
        left: 280px;
      }

      .container {
        position: relative;
      }

      #paul {
        width: 350px;
        height: 350px;
        position: relative;
      }

      .overlay {
        position: relative;
        opacity: 0;
        transition: .5s ease;
      }

      .container:hover .overlay {
        opacity: 1;
        body {
          margin: 0;
          padding: 0;
        }
    </style>

    </head>

    <body>

      <div id="topbar">

        <img id="lines" src="images/3lines.png">

        <span id="walrus-text">THE WALRUS</span>

        <span id="beatles-text">BEATLES FAN SITE</span>

        <a href="https://en-gb.facebook.com/thebeatles"><img id="facebook" src="images/facebook.png"></a>

        <a href="https://twitter.com/thebeatles"><img id="twitter" src="images/twitter.png"></a>

        <a href="https://open.spotify.com/artist/3WrFJ7ztbogyGnTHbHJFl2"><img id="spotify" src="images/spotify.png"></a>

        <a href="https://www.youtube.com/results?search_query=beatles"><img id="youtube" src="images/youtube.png"></a>

        <a href="https://itunes.apple.com/us/artist/the-beatles/136975"><img id="itunes" src="images/itunes.png"></a>

        <a href="https://www.thebeatles.com/contact"><img id="email" src="images/email.png"></a>

      </div>

      <div class="clear">

      </div>

      <div id="fabfour">

        <img id="beatle-george" src="images/beatlegeorge.jpg">



        <div class="container">

          <img id="beatle-paul" src="images/beatlepaul.jpg">

          <div class="overlay">

            <img id="paul" src="images/paul.jpg">

          </div>

          <img id="beatle-john" src="images/beatlejohn.jpg">

          <img id="beatle-ringo" src="images/beatleringo.jpg">

        </div>
Mouser
  • 13,132
  • 3
  • 28
  • 54
Dan
  • 1
  • 1
    Hi Dan, welcome to Stack Overflow. Please create a minimal reproducible example. Now it's a lot of code that's not needed to answer your question. It also makes it hard to guess what code is necessary. See also https://stackoverflow.com/help/minimal-reproducible-example – Roy Jan 25 '20 at 17:26
  • Putting the code under code tag would help in better understanding of the question.Please do the required.And provide a minimum reproducible example. – Shubham Batham Jan 25 '20 at 17:29
  • https://stackoverflow.com/questions/32420841/changing-background-image-when-hovering-on-a-list-item – apincik Jan 25 '20 at 18:37
  • #beatle-paul { width:350px; height:350px; position:relative; left: 280px; }.container { position: relative; } #paul { width:350px; height:350px; position:relative; } .overlay { position: relative; opacity: 0; transition: .5s ease; } .container:hover .overlay { opacity: 1; height: 100%; body { margin: 0; padding: 0; } – Dan Jan 25 '20 at 20:23

0 Answers0