mappa del malandrino by @fabiana - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<table>Tag primario per la creazione di tabelle
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<head>Tag primario di un documento HTML
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
_topApre collegamenti ipertestuali nell'elemento parent assoluto
<tbody>Definisce il contenuto principale di una tabella.

Users

Log in to search for users

Explore

Find inspiration

Heads Or Tails Random Tally

form 6 da finire

IL COLIBRI\' E LA GOCCIA DI RUGIADA

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Split image on hover</title>
<style>
  /* layout base */
  body {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    margin:0;
    background:#222;
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  /* il contenitore che mantiene l'immagine */
  .split-wrap {
    width:450px;               /* cambia larghezza a piacere */
    height:550px;              /* mantieni proporzione o modifica */
    position:relative;
    overflow:hidden;
    cursor:pointer;
    user-select:none;
    box-shadow:0 10px 30px rgba(0,0,0,0.6);
    border-radius:6px;
    background:#000;
    touch-action:manipulation; /* aiuta sui dispositivi touch */
  }

  /* le due metà */
  .half {
    position:absolute;
    top:0;
    width:50%;
    height:100%;
    background-image: url('https://i.ibb.co/Xf12qJ0y/60a9e90d79d141d8460bf7fa06e603f6-removebg-preview.png');
    background-repeat:no-repeat;
    /* IMPORTANT: background-size:200% 100% e background-position permettono
       di mostrare esattamente la metà corretta dell'immagine in ciascun div */
    background-size:200% 100%;
    transition: transform 450ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
    z-index:1;
    filter: sepia(80%) saturate(70%) hue-rotate(-20deg) brightness(90%) contrast(115%);
  }

  .half.left {
    left:0;
    background-position: 0% 50%; /* mostra la metà sinistra dell'immagine */
    transform: translateX(0);
    transform-origin: left center;
  }

  .half.right {
    right:0;
    left:auto;
    background-position: 100% 50%; /* mostra la metà destra dell'immagine */
    transform: translateX(0);
    transform-origin: right center;
  }

  /* azione sul hover del contenitore: le metà si spostano */
  .split-wrap:hover .half.left,
  .split-wrap.open .half.left { /* .open è per tocco (JS) */
    transform: translateX(-90%); /* regola la distanza */
  }

  .split-wrap:hover .half.right,
  .split-wrap.open .half.right {
    transform: translateX(90%);
  }
  /* immagine interna (inizialmente invisibile) */
  .inner-image {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-width:120%;
    opacity:0;
    transition:opacity 600ms ease 200ms;
    z-index:0;
    filter:opacity(20%); /* filtro trasparenza */
  filter: saturate(70%) hue-rotate(-20deg) brightness(55%) contrast(100%);
}

  /* casella di testo sopra l’immagine */
  .inner-textbox {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:70%;
    padding:10px;
    border:none;
    border-radius:6px;
    font-size:18px;
    text-align:center;
    z-index:1;
    opacity:0;
    transition:opacity 600ms ease 400ms;
    background:rgba(0,0,0,0.5);
    color:#f0e6d2;
  }

  /* diventano visibili SOLO quando aperta */
  .split-wrap:hover .inner-image,
  .split-wrap.open .inner-image {
    opacity:1;
  }
  .split-wrap:hover .inner-textbox,
  .split-wrap.open .inner-textbox {
    opacity:1;
  }

  /* extra: testo/overlay al centro che appare quando si apre */
  .center-info {
    position:absolute;
    left:38%;
    top:36%;
    transform:translate(-50%,-50%);
    z-index:2;
    color:#ede9dd;
    text-align:left;
    text-align:justify;
    font-family:Verdana;
    font-weight:500;
    font-size: 9px;
    letter-spacing:1px;
    opacity:0;
    transition:opacity 300ms ease 120ms;
    pointer-events:none;
    text-shadow:0 2px 6px rgba(0,0,0,0.6);
  }

  .split-wrap:hover .center-info,
  .split-wrap.open .center-info {
    opacity:1;
  }

  /* responsive semplice */
  @media (min-width:900px){
    .split-wrap { width:420px; height:840px; }
  }
</style>
</head>
<body>

<div class="split-wrap" id="split">
  <div class="half left"></div>
  <div class="half right"></div>

  <!-- immagine nascosta che appare -->
  <img src="https://i.pinimg.com/736x/91/69/8d/91698dd9b0c5c142fd9e8bdc617e997d.jpg" 
       alt="Immagine interna" class="inner-image">

  <!-- casella di testo sopra -->
   <div class="center-info">LIùSAIDH CAMPBELL</div>
  </div>
  <div class="center-info">LIùSAIDH CAMPBELL</div>
  </div>
  
</div>

<script>
  // Opzionale: sui dispositivi touch :hover non funziona sempre,
  // quindi attiviamo l'effetto al tap con toggle della classe 'open'.
  (function(){
    const container = document.getElementById('split');

    // toggle al click/tap
    container.addEventListener('click', () => {
      container.classList.toggle('open');
    });

    // chiude se clicchi fuori (solo se aperto)
    document.addEventListener('click', (e) => {
      if (!container.contains(e.target)) {
        container.classList.remove('open');
      }
    });

    // (opzionale) usa esc per chiudere
    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape') container.classList.remove('open');
    });
  })();
</script>

</body>
</html>