mappa del malandrino by @fabiana - Codewith.it

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

Referenze

disabledImpedisce la modifica di un input
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<a>Inserisce link e collegamenti ipertestuali
application-x-www-form-urlencodedCodifica dei caratteri di un form
relServe a definire la relazione tra il documento e una risorsa.
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

benvenuti nella mia scuola

26/01/2024 pagina html

RadioTorchiarolo:NUOVO SITO - Home

PROVA SITO ALEX

Supermercato si

Tracker dei km fatti

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>