Transition per div dentro div contenitore griglia.

**WebNovellinoDsg** · 22-12-2021, 20:08

Buona sera ragazzi, da novellino avrei bisogno che qualcuno mi aiuti col mio codice.
In breve ho un div con un contenuto <p><pre>testo..., questo div ha un testo all'interno che supera le sue dimensioni in lunghezza, sono riuscito quindi a far vedere nel div semplice solo la parte di testo che voglio,

ora però, oltre a quanto fatto, vorrei poter mettere a questo div una transizione che permetta al div di allungarsi solo verso il basso fino a permettere la visualizzazione del resto del testo al suo interno, questo ovviamente deve avvenire solo al passaggio del mouse sul div e deve rimanere aperto fin quando non tolgo il puntatore da sopra.
Uno dei possibili problemi del div in questione è che non ne conosco le dimensioni perchè sono dovute a quanto scritto in percentuale nel grid template .box, il div in questione con testo lunghissimo è "DivBio".
A proposito, quando la transizione si aprirà non dovrà spostare il resto del contenuto della pagina ma sovrapporsi a ciò finirà sotto.
Allego l'immagine.
Grazie in Anticipo.

**KillerWorm** · 22-12-2021, 21:41

Ciao, sarebbe utile vedere un esempio funzionante della situazione a cui sei arrivato.

Ti invito a postare del codice (usando gli appositi tag per formattarlo sul forum, vedi regolamento di sezione) o, meglio ancora, ad usare un qualche servizio code playground per rendere disponibile un esempio minimo riproducibile (vedi Tryit o CodePen o altri simili; qualcuno è anche elencato in questo capitolo dei link utili CSS, sotto la voce "Applicazioni online").

In questo modo semplifichi il lavoro per chi vorrebbe darti eventuale aiuto e sarà più probabile, per te, riceverne

**WebNovellinoDsg** · 23-12-2021, 00:27

codice:

    body{
        background-image: radial-gradient(gold 0%, #F0C241 10%, goldenrod 20%, #cda435 30%,goldenrod 40%,
        #F0C241 50%, gold 60%, #F0C241 70%, goldenrod 80%, #cda434 90%, goldenrod 100%);
        background-repeat: no-repeat; background-attachment: scroll; background-size: cover; width: 1339px; height: 1326px; margin: 10px;}

    .box{
        display: grid; gap: 10px; grid-template-columns: 22% 11% 34% 11% 22%;
        grid-template-rows: 30% 5% 25% 25% 10% 5%; width: 1289px; height: 1276px;}
    
    .L20{}
    .L33{}
    .L50{}
    .L60{}
    .SX, .C, .DX{border: 5px solid blueviolet; color: white; background-color: black; text-align: center; overflow: hidden;}
    .SX {}
    .C  {}
    .DX {}
    h3  {}
    p   {}
    pre {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
    .ParBIO{}
    .DivBio{width:; height:; transition:}
    .box:hover .DivBio{height:}
</style>

    <body>
        <div id="div1box13" class="box">

            <div class="SX"    class="DivBio" style="grid-column: 1/2; grid-row: 1/3;">


            <h4>BIOGRAFIA</h4>
            <p class="ParBIO";><pre>
lungo testo<pre><p></div> 
seguono altri div e chiusura dell'html...

Spero di aver fatto bene ora.
Grazie.

**KillerWorm** · 23-12-2021, 00:56

Sarebbe meglio un esempio minimo funzionante, altrimenti chi vorrebbe darti aiuto dovrebbe preoccuparsi di riassemblare il tutto cercando di capire come risolvere il codice mancante e il risultato potrebbe non corrispondere alla tua reale situazione... puoi capire da te che risulta poco pratico per chi vorrebbe aiutarti.

Magari prova ad usare un playground come indicato.

Inoltre, quando posti codice sul forum sarebbe meglio rimuovere l'eventuale formattazione che solitamente è applicata dall'editor che stai usando.
Per incollare senza formattazione, in genere si può usare la combinazione da tastiera CTRL+MAIUSC+V.

**WebNovellinoDsg** · 23-12-2021, 01:16

codice HTML:

<!DOCTYPE html>
<html lang="it-en-us">
    <head>
        <title>acleofeoceplcepf&ograve; Galleria!</title>
        <meta charset="utf-8" name="author" content="FDS";/>
    </head>

<style>

    body{
        background-image: radial-gradient(gold 0%, #F0C241 10%, goldenrod 20%, #cda435 30%,goldenrod 40%,
        #F0C241 50%, gold 60%, #F0C241 70%, goldenrod 80%, #cda434 90%, goldenrod 100%);
        background-repeat: no-repeat; background-attachment: scroll; background-size: cover; width: 1339px; height: 1326px; margin: 10px;}

    .box{
        display: grid; gap: 10px; grid-template-columns: 22% 11% 34% 11% 22%;
        grid-template-rows: 30% 5% 25% 25% 10% 5%; width: 1289px; height: 1276px;}
   
    .L20{}
    .L33{}
    .L50{}
    .L60{}
    .SX, .C, .DX{border: 5px solid blueviolet; color: white; background-color: black; text-align: center; overflow: hidden;}
    .SX {}
    .C  {}
    .DX {}
    h3  {}
    p   {}
    pre {font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;}
    .ParBIO{}
    .DivBio{width:; height:; transition:}
    .box:hover .DivBio{height:}
</style>

    <body>
        <div id="div1box13" class="box">

            <div class="SX"    class="DivBio" style="grid-column: 1/2; grid-row: 1/3;">


            <h4>BIOGRAFIA</h4>
            <p class="ParBIO";><pre>
Uomo dalle innumerevoli doti:
Geometra, Dott.Mag., Professore,
Ingegnere, Meccanico, Elettronico,
Inventore, Musicista Compositore,
Scultore, POETA, GRAFICO, PITTORE.

In una delle sue tante opere,
fa riferimento al tempo che sentiva
di aver perso nel corso della vita,
ma di fronte alle sue incalcolabili
opere, non ci si riesce a capacitare
di quando lui abbia perso realmente
tempo, pochi al mondo riuscirebbero
a completare anche solo la metà di
tutti i suoi lavori, forse,
meglio dire "capolavori"...


(F.S.J.)</b></pre></p>
<br>
            <p class="PAR"><pre>
Artista profondamente immerso nel
continuo affinamento delle tecniche,
che indichiamo come uno dei più
autonomi rappresentanti del
rinnovato interesse realistico.
Scava nella materia d'un
esistenzialismo della crisi,
esprimendo quel senso di
disorientamento che caratterizza la
coscienza contemporanea, andando
incontro al fato contro cui la altra
ribellione non può prendere
forma se non quella dell'"eterno nel
transitorio". C'è dunque nella sua
arte, un doppio fondo, quello che
assolutizza l'uomo d'oggi e quello
che lo interpreta in ogni debolezza
umana, nell'uno e nell'altro vive
recondita e inconsapevole,
l'esigenza di un rinnovamento.
L'innovazione stilistica e la varietà
tematica, fanno parte del suo
carattere estroso e della sua
intelligenza spietata, per cui la
sua satira vivace assume il sapore
di una favola amara, l'intuizione
si è maggiormente affinata in
svolazzi surreali e metafisici,
in ricchi motivi formali ecromatici,
sempre più attento alla mimesi,
all'esistenziale, nel fremito di un
colore, di una luce, di una idea,
di cento idee, spesso nell'esasperata
concettosità che addensa immagini
audaci e sconcertanti, in segno di
protesta.

Poeta di forte espressività,
nella sua produzione trovano
risonanza l'antico mondo contadino,
scene e bozzetti di vita paesana,
ma molte delle sue liriche,
scaturiscono da una profonda analisi
dell'amara realtà della vita e di una
società che va sempre più alla deriva.
La sua opera, si configura come
ricerca intensa quale tensione
continua (non ripetitiva) verso un
modulo espressivo, originale e
creativo, capace di collegare l'idea
germinale &mdash;&laquo;contenuti inconsci,
come momenti di propulsione
intellettuale, infinito urgere di
sollecitazioni, emozioni, tensioni
che sono alla base della sua
esperienza personale in tutte le sue
direzioni soggettive e oggettive
(esperienza estetica e culturale)&raquo;&mdash;
e la sua concreta realizzazione,
per la quale gioca un ruolo decisivo
la perizia tecnica dell'uso "pulito",
chiaro, smagliante e preciso dei
colori. Gli Impulsi, i bisogni e le
aspirazioni della sua personalità,
premono per trovare una precisazione
e definizione, che a volte, acquista
connotazioni razionali &mdash;&laquo;alcuni quadri
danno in "sintesi artistica",
proprio lo stimolo a riflessioni su
oggettive, culturali e sociali&raquo;&mdash;
altre più volte, si risolve in un
"suggerimento", sottile, aereo,
indefinito di emozioni, di stati
d'animo che rimandano pure a
problematiche esistenziali; è questo
il segno di ciò che è stato chiamato
"subliminale" nella sua pittura,
presente come filo conduttore di
tutta la sua ricerca, cioè lo sforzo
e la tensione continua di trattare
"ciò che è sotto la soglia sensoriale"
(impulsi sensuali, aggressivi, odio,
emozioni, il"limite" morte),
trova così la maniera di subliminarsi
nella creatività artistica,
espressione che costituisce la
"fatica", il "tormento", "l'intima
soddisfazione" dell'artista.
In molti quadri è stata raggiunta la
"perfezione" (fusione o unità
inscindibile tra idea germinale -
tecnica - realizzazione), tanto che,
per la plasticità e levigatezza delle
figure, si ha l'impressione di
trovarsi di fronte a "sculture
pittoriche" o a "pitture scultoree".

Ha partecipato a vari concorsi
nazionali classificandosi sempre ai
primi posti, come pittore, grafico,
poeta e non solo...
Si è dedicato anche alla composizione
di brani musicali.
Molto rilevante anche la sua genialità
d'inventore, alcuni brevetti infatti,
furono richiesti da industriali
italiani e stranieri, riscuotendo
particolare interesse e contribuendo
così all'evoluzione dell'industria,
allora moderna.
            </pre></p></div>

            <div class="C"    class="L60" style="grid-column: 2/5; grid-row: 1/2;">
            <img src="C:\Users\Utente\Desktop\Sito internet\IMG_Prova Copertina.jpg" alt="Errore di visualizzazione!"
            width="100%" height="100%"></div>

            <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 1/3;">
                            <h4>SULAGNU</h4>
                            <p class="TX1"><pre>
...
            </pre></p></div>

            <div class="C"    class="L60" style="grid-column: 2/5; grid-row: 2/3;">box4</div>

            <div class="SX"    class="L20" style="grid-column: 1/2; grid-row: 3/4;">box6</div>
                            <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 3/4;">box7</div>
            <div class="SX"    class="L20" style="grid-column: 1/2; grid-row: 4/5;">box8</div>
                            <div class="DX"    class="L20" style="grid-column: 5/6; grid-row: 4/5;">box9</div>

            <div class="SX"    class="L33" style="grid-column: 1/3; grid-row: 5/6;">box12</div>
                    <div class="C"    class="L33+1" style="grid-column: 3/4; grid-row: 5/6;">box13</div>
                            <div class="DX"    class="L33" style="grid-column: 4/6; grid-row: 5/6;">box14</div>

                    <div class="C"    class="L100" style="grid-column: 1/6; grid-row: 6/7;">box15</div>

        </div>
    </body>
</html>

Spero di aver fatto bene ora.
Grazie.

**KillerWorm** · 23-12-2021, 03:30

Il codice riporta diversi errori di validazione; dandoti dei consigli su come intervenire per il problema in questione, può anche essere che i risultati siano inconsistenti a causa di tali errori.

In qualunque caso sarebbe meglio lavorare su un codice valido.

Prima di proseguire ti consiglio quindi di iniziare col validare l'intero codice. Puoi usare questo validatore online e cercare di correggere tutti gli errori che ti vengono segnalati analizzando il tuo codice.

Se hai bisogno di aiuto a capire come risolvere determinati errori, puoi chiedere sempre su questa discussione.

Ad ogni modo...

ora però, oltre a quanto fatto, vorrei poter mettere a questo div una transizione che permetta al div di allungarsi solo verso il basso fino a permettere la visualizzazione del resto del testo al suo interno, questo ovviamente deve avvenire solo al passaggio del mouse sul div e deve rimanere aperto fin quando non tolgo il puntatore da sopra.
Uno dei possibili problemi del div in questione è che non ne conosco le dimensioni perchè sono dovute a quanto scritto in percentuale nel grid template .box

in questo caso è possibile che il solo CSS non sia sufficiente ad ottenere ciò che chiedi; eventualmente si potrebbero trovare delle soluzioni con l'ausilio di un po' di JavaScript... ma, ripeto, sarebbe bene partire da un codice validato.

**WebNovellinoDsg** · 23-12-2021, 13:52

Originariamente inviata da KillerWorm

Il codice riporta diversi errori di validazione; dandoti dei consigli su come intervenire per il problema in questione, può anche essere che i risultati siano inconsistenti a causa di tali errori.

Ciao, riguardo gli errori so già quali sono e non recano problemi al funzionamento della pagina, utilizzo visual studio code che già li segnala, li ho lasciati apposta perchè mi ricordano alcuni passaggi senza crearmi però dei problemi, ad ogni modo ora sistemo tutto e riposto il codice in modo più pulito possibile per chi voglia aiutarmi.
Ps: gli errori in ogni caso sono dei semplici riferimenti a classi o tag lasciati vuoti nello style css.

Riguardo quello che voglio fare in realtà ho visto degli esempi su internet e dovrebbe poter bastare del css, in ogni caso non contraddico comunque la tua ipotesi perchè sicuramente ne sai più di me.
Colgo ancora l'occasione di ringraziarti e augurarti buona giornata.

**WebNovellinoDsg** · 23-12-2021, 14:40

https://jsfiddle.net/anjfrLhv/#&togetherjs=ae3ffolkxy

Ecco, credo di essere riuscito a postare il link per accedere rapidamente al codice per aiutarmi col problema della transizione da aggiungere al div bio.

**KillerWorm** · 23-12-2021, 15:04

gli errori in ogni caso sono dei semplici riferimenti a classi o tag lasciati vuoti nello style css

No, quelli li ho visti e infatti ho dato per scontato che li avessi lasciati volontariamente vuoti, ma ci sono altri errori di markup malformato, come lo il blocco <style> fuori posto, vari tag aperti o chiusi male e altri errori vari.

Inutile dirti che sarebbe meglio correggerli tutti, anche inserendo quei valori che hai lasciato mancanti (o tutt'al più commentare quelle parti e aggiungere un eventuale testo di promemoria).

Ad ogni modo l'esempio che fornisci (sebbene minimo) è essenziale che sia funzionante in tutte le sue parti e che abbia un codice valido perché, ripeto, è possibile che i risultati, ottenuti con un esempio mal funzionante, siano inconsistenti in quanto i diversi browser (che cercano, ognuno a proprio modo, di correggere gli errori di validazione) possono restituire differenze anche sostanziali.

Il condizionale è d'obbligo ma questo non toglie il fatto che sarebbe comunque opportuno fornire un esempio valido.

Chiaramente tutto va a vantaggio tuo

dovrebbe poter bastare del css

Sì, è possibile che sia sufficiente il solo CSS ma a seconda dell'effetto che vuoi ottenere potrebbero esserci delle limitazioni per cui potrebbe essere più semplice gestire la cosa via script.

Le animazioni CSS sono applicabili su proprietà animabili e l'effetto di transizione è apprezzabile nel caso in cui sia possibile il calcolo dei valori intermedi tra quello iniziale e quello finale.

Se tu hai un height che va da un valore X (ad esempio 100px) ad un valore "auto", ovviamente i valori intermedi non possono essere calcolati, quindi la transizione non sarà apprezzabile.

Una soluzione potrebbe essere l'uso di max-height, impostando un valore finale che sia sufficientemente grande per garantire la completa visibilità dell'elemento aperto. Questa soluzione però ha delle limitazioni in quanto non è possibile sapere esattamente quale possa essere il valore da impostare e la transizione potrebbe non essere omogenea per le eventuali diverse altezze che può avere ciascun elemento quando è aperto.

Certo, possono esserci altre soluzioni sempre CSS ma bisogna capire esattamente quali possono essere i risultati e se soddisfano le tue esigenze.

In ogni caso, per provare adeguatamente delle eventuali soluzioni e verificarne gli effettivi risultati, è opportuno partire da un codice di funzionante di esempio; vedo ora che sei riuscito a postarlo

**KillerWorm** · 29-12-2021, 16:49

Ciao, non so se sei riuscito ad elaborare già qualcosa. Nel tuo fiddle vedo comunque che non hai rimosso i vari errori di validazione, inutile ripeterti che sarebbe meglio farlo

Per la richiesta in questione, una soluzione può essere l'uso di max-height come già accennato.

Prova magari in questo modo:
- avvolgi l'intero contenuto dentro un opportuno <div> a cui applichi una classe specifica per questa effetto, ad esempio:

codice HTML:

<div class="espandibile">
  Qui tutto il contenuto che vuoi rendere espandibile
</div>

- rimuovi "overflow: hidden;" che hai definito nel CSS per il contenitore div .SX, altrimenti il contenuto resterebbe limitato a questo div vanificando il risultato;

- quindi aggiungi qualcosa di simile a questo:

codice:

    .espandibile {
      position: relative;
      overflow: hidden;

      max-height: 100%;
      background-color: #000;
      z-index: 0;
      box-shadow: 0 0 0 0 #fff;

      transition: 1s ease-in-out;
    }

    .espandibile:hover {
      max-height: 1000%;
      background-color: #123;
      z-index: 999;
      box-shadow: 0 0 8px 2px #fff;
    }

Chiaramente puoi personalizzare le varie proprietà come meglio credi (io ho voluto applicare un background e un box-shadow per dare risalto quando il div è espanso), fai solo attenzione ad alcune proprietà (come position, overflow, z-index) che dovrebbero restare tali perché sono funzionali per l'effetto da ottenere durante la transizione.

Fai sapere, buon proseguimento

Discussione: Transition per div dentro div contenitore griglia.

Strumenti discussione

Ricerca discussione

Visualizza

Transition per div dentro div contenitore griglia.

Permessi di invio