mappa del malandrino by @fabiana - Codewith.it

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

Referenze

acceptDefinisce e filtra il formato dei file per il tag <input type=file>
<map>Inserisce immagini mappa cliccabili in un documento
classDefinisce una o più classi per elemento
<h2>Titolo di intestazione di secondo livello
idIdentifica univocamente un elemento HTML
headersDetermina la relazione tra celle e celle di intestazione di una tabella.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Mundane Monday\\

La mia prima pagina HTML

Calcolatrice php

Registration Form php pazienti

La cicala e la formica

Neon Flux - Visual Design in Motio

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>