mappa del malandrino by @fabiana - Codewith.it

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

Referenze

colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<strong>Definisce una parte del testo importante con formattazione in grassetto.
minImposta il valore numerico o temporale minimo per un elemento input
srcIndica la provenienza di una risorsa esterna (tramite URL).
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il Giro del Mondo in 80 Giorni(2)

tabella ricetta esame

REVIEW: For Loops

educazione civica info

20240126 pagina html

Ethical hacking

Gesù nostro signore(2)

La cicala e la formica

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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>