Hover con ritardo e animazione css dall'alto in basso

« Older   Newer »
 
  Share  
.
  1. Alfiere2
     
    .
    Avatar

    Member

    Group
    Helper
    Posts
    288

    Status
    Anonymous
    Ti ho fatto un esempio veloce da vedere nello stesso posto https://centouno.forumcommunity.net quadratino blu

    ho usato questo codice


    CODICE
    <style>#boxcontenitore {position: relative; width: 800px; margin: auto; border: 1px solid red; text-align: center}
    #boxcontenuto {width: 30px; display: inline-block; margin: auto}
    #immaginehover {width: 30px; height: 30px; display: block; background-color: blue; margin: auto}
    #testonews {color: black}
    #news {position: relative; top: -30px; left: -385px; background-color: #C0C0C0; width: 800px; height: 0; transition: height 2s; overflow: hidden}

    #boxcontenuto:hover #news {height: 200px; display: block}</style>

    <div id="boxcontenitore">
    <div id="boxcontenuto">
    <div id="immaginehover"></div>
    <div id="news">
    <div id="testonews" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
    </div>
    </div>
    </div>
     
    .
9 replies since 24/3/2024, 15:05   556 views
  Share  
.