Visualizzazione dei risultati da 1 a 4 su 4

Discussione: Container colonna

  1. #1

    Container colonna

    Ho un problema nella scrittura di un codice HTML per sovrapporre a un'immagine una scritta allo spostamento del mouse. Il problema sussiste nel momento in cui aggiungo il codice all'interno di una colonna creata su Jimdo. L'immagine risulta sempre la metà della colonna, non riempiendola. allego il codice, se qualcuno potesse darmi una mano sarebbe fantastico.

    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .container {
    position: relative;
    width: 50%;
    }


    .image {
    display: block;
    width: 100%;
    height: auto;
    }


    .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #008CBA;
    }


    .container:hover .overlay {
    opacity: 1;
    }


    .text {
    color: white;
    font-size: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
    }
    </style>
    </head>
    <body>


    <h2>Fade in Overlay</h2>
    <p>Hover over the image to see the effect.</p>


    <div class="container">
    <img src="img_avatar.png" alt="Avatar" class="image">
    <div class="overlay">
    <div class="text">Hello World</div>
    </div>
    </div>


    </body>
    </html>

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,216
    Ciao e benvenuto/a, non uso Jimdo ma dal codice vedo che .container ha width:50%; non è che il problema sta proprio qui?
    Magari devi applicare width:100%.

    Se non è ciò che intendevi, prova a chiarire con maggiori dettagli, postando uno screenshot e/o un link alla pagina online, se accessibile pubblicamente.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

  3. #3
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    Ciao e benvenuto/a, non uso Jimdo ma dal codice vedo che .container ha width:50%; non è che il problema sta proprio qui?
    Magari devi applicare width:100%.

    Se non è ciò che intendevi, prova a chiarire con maggiori dettagli, postando uno screenshot e/o un link alla pagina online, se accessibile pubblicamente.
    Grazie per la risposta, ho già provato senza risultati a mettere come width 100%. Non so se si capisca dallo screenshot, ma sono 3 colonne preimpostate nelle quali si può mettere un codice. Ti allego lo screenshot, grazie in anticipo
    File allegati File allegati

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,216
    Senza avere chiaro il contesto è difficile poterti aiutare o indirizzarti in maniera più mirata.

    Non ho mai usato Jimdo e non so cosa ti sia permesso inserire in quegli spazi. Non so se sono applicate ulteriori regole CSS che possono influire sui contenuti e quindi su ciò che hai inserito.

    Dal solo codice che hai postato, e anche con lo screenshot, e impossibile capire cosa sta andando storto se non si visiona la pagina in azione.

    Se la pagina è pubblica online, e se ti è possibile, posta il link.

    Fai sapere.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 20% tra i post del forum; il 15% sul web. Ti resta... humm spè
    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

    "Mi son documentato"

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2022 vBulletin Solutions, Inc. All rights reserved.