Visualizzazione dei risultati da 1 a 3 su 3

Discussione: Modificare dimensione slideshow all'interno di un tooltip

  1. #1

    Modificare dimensione slideshow all'interno di un tooltip

    Non riesco ad aumentare l'altezza delle immagini della slideshow che si trova nel tooltip, al momento assomigliano a delle schiacciatine.

    codice HTML:
    <div onclick="void(0);" class="tooltip">Trasimeno
                        <div class="info">
                            <!--<img class="trasimeno" src="images/trasimeno.jpg">-->
                            <div class="slideshow-container">
                                <div class="mySlides fade">
                                    <img class="trasimeno" src="images/trasimeno.jpg">
                                    <div class="cptn">Passignano Sul Trasimeno</div>
                                </div>
                                <div class="mySlides fade">
                                    <img class="trasimeno" src="images/trasimeno2.jpg">
                                    <div class="cptn">Castello del Leone, Castiglione del Lago</div>
                                </div>
                                <div class="mySlides fade">
                                    <img class="trasimeno" src="images/trasimeno3.jpg">
                                    <div class="cptn">Castello Borgia,  Passignano sul Trasimeno</div>
                                </div>
                                <div class="mySlides fade">
                                    <img class="trasimeno" src="images/trasimeno4.jpg">
                                    <div class="cptn">Castello Borgia,  Passignano sul Trasimeno</div>
                                </div>
                                
                                <a class="prev" onclick="plusSlides(-1)"></a>
                                <a class="next" onclick="plusSlides(1)"></a>
                            </div>
                            
                            <div class="text">Situato in posizione centrale rispetto alle città d’arte
                            del centro Italia il suo comprensorio è composto da otto comuni, alcuni dei
                            quali adagiati sulle colline (Città della Pieve, Paciano, Panicale e 
                            Piegaro) ed altri (Castiglione del Lago, Magione, Passignano sul Trasimeno 
                            e Tuoro sul Trasimeno) direttamente affacciati sullo specchio d´acqua.<br><br>
                            Della bellezza e armonia di questi luoghi se ne accorse anche il principe 
                            Trasimeno che, rimasto affascinato da questo paesaggio, si imbatté nella 
                            bellezza della ninfa Agilla. Da questo duplice incontro nacque una passione
                            che finì tragicamente con la morte del principe. Da allora il lago prese il
                            nome di Trasimeno e si dice che quando il vento accarezza le sue acque, si
                            possa ancora udire il malinconico lamento della ninfa Agilla che piange 
                            alla ricerca del suo amato.</div>
                            <a href="http://www.lagotrasimeno.net/" target="_blank">More</a>
                        </div>
                    </div>

    codice:
        /*-- Start tooltips --*/
    
    .tooltip {
      position: relative;
      display: inline-block;
      padding: 0;
      margin: 0;
      cursor: pointer;
      color: #000000;
    }
    
    .tooltip:hover .info, .tooltip:focus .info {
      visibility: visible;
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
    
    .info {
      box-sizing: border-box;
      position: absolute;
      bottom: -400px;
      left: 115px;
      display: block;
      background: #FFFFFF;
      border: 1px solid #000000;
      width: 500px;
      font-size: 25px;
      line-height: 24px;
      text-align: justify;
      cursor: text;
      visibility: hidden;
      opacity: 0;
      transform: translate3d(0, -20px, 0);
      transition: all .5s ease-out;
    }
    
    .info:before {
      position: absolute;
      content: '';
      width: 100%;
      height: 14px;
      bottom: -14px;
      left: 0;
    }
    
    .info:after {
      position: absolute;
      content: '';
      width: 10px;
      height: 10px;
      transform: rotate(45deg);
      bottom: -5px;
      right: 480px;
      margin-left: -5px;
      background: #000000;
    }
    
    .slideshow-container {
        width: auto;
        height: 250px;
        position: relative;
        margin: auto;
        padding: 0;
    }
    
    .mySlides {
        display: none;
    }
    
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }
    
    @keyframes fade {
      from {opacity: .4}
      to {opacity: 1}
    }
    
    .trasimeno {
        with: 100%;
        height: 250px;
    }
    
    .cptn {
        color: #f2f2f2;
        font-size: 15px;
        padding: 8px 12px;
        position: absolute;
        bottom: 8px;
        width: 100%;
        color: #8d7200;
        font-size: 25px;
        text-align: center;
    }
    
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 100px;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
    }
    
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }
    
    .text {
      display: block;
      padding: 14px 17px 35px 17px;
      color: #8d7200;
    }
    
    .info a {
        display: inline;
        position: relative;
        bottom: 20px;
        left: 215px;
        margin: 0;
        padding: 3px 10px;
        font-family: 'Times New Roman', sans-serif;
        text-decoration: none;
        color: green;
        font-size: 20px;
        font-weight: bold;
        border: 2px solid green;
        border-radius: 5px;
        transition: background-color 0.5s, color 0.5s;
    }
    
    .info a:hover, .info a:focus {
        background-color: green;
        color: #FFFFFF;
    }
    
        /*-- End tooltips --*/
    Heelp, I need somebody, heelp
    Devo pensarci...

  2. #2
    Ok risolto anche questa volta, in pratica le immagini non si allargavano perche in vece di "width" avevo scritto "with".

    Quanto sono pignoli sti pc!
    Ultima modifica di Utonto Tonto; 01-02-2018 a 12:01
    Devo pensarci...

  3. #3
    Mi correggo...non ho risolto una mazza, ho ancora bisogno di aiuto
    Devo pensarci...

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 © 2018 vBulletin Solutions, Inc. All rights reserved.