Sign in
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

image to appear when the cursor passes over a link

  • This topic has 3 replies, 2 voices, and was last updated 12 months ago by .
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #9403
    Avatar photoclac1

    I want an image to appear when the cursor passes over a link.
    I inserted this CSS code :

    .survol-hover-title {
      display: inline;
      pointer-events: auto;
      cursor: pointer;
      font-family: helvetica;
      font-size: 24px;
    }
    
    .survol-hover-image {
      display: none;
    }
    
    body:not(.mobile) .survol-hover-title:hover + .survol-hover-image {
      display: flex;
      pointer-events: none;
    }
    
    .survol-hover-image {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: -1;
      pointer-events: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      /* Change width and height to scale images */
      width: 95vw;
      height: 95vh;
    }
    
    .survol-hover-image img {
      max-width: 100% !important;
      max-height: 100% !important;
      width: auto !important;
      height: auto !important;
      margin-bottom: 0;
    }

    And this HTML code to display V11.jpg image when I hover over the link V11:

    V11

     

    
    

    In Preview mode, the display corresponds well to my expectations.
    However, when I synchronize my site, the image is always displayed, under the link.
    Would you have an explanation and a solution?

    #9427
    Avatar photocandidexmedia

    Strange… what are you seeing when you inspect the element in your browser?

    Is there a live page that you could share for us to take a look?

    #9430
    Avatar photoclac1

    You are right, it is very strange. Especially now that it works, after a resynchronization of my site.
    The page is here: https://lumiere.click-clack.fr/les-foldings.html

    The issue was on “Viseur(s)”

    #9433
    Avatar photocandidexmedia

    Hmm, well glad it fixed itself!

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.