SocialAcademy • Forum

Social Academy Community Support Forum & Free Tutorial's & Skins



[Tutorial] Slide in Captions


    • Please log in to Reply

    View previous topic View next topic Go down  Message [Page 1 of 1]

    avatar
     
    Administrator
     Administrator

    Posted on Sat Feb 22, 2014 1:01 am

     


    Tutorial: Image Side in Caption




    --> Tutorials  <--
    Image Slide in Caption



    - HTML
    Code:
     <figure class="cap-left">
         <img src="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash2/t1/263821_242664355752650_1680862_n.jpg" alt="">
         <figcaption>
         Social Academy
         </figcaption>
        </figure>


    - CSS
       
    Code:
    figure { display: block; position: relative; float: left; overflow: hidden; margin: 0 20px 20px 0; } figcaption { position: absolute; background: black; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } figure:hover figcaption { opacity: 1; } figure:before { content: "?"; position: absolute; font-weight: 800; background: black; background: rgba(255,255,255,0.75); text-shadow: 0 0 5px white; color: black; width: 24px; height: 24px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 24px; -moz-transition: all 0.6s ease; opacity: 0.75; } figure:hover:before { opacity: 0; } .cap-left:before { bottom: 10px; left: 10px; } .cap-left figcaption { bottom: 0; left: -30%; } .cap-left:hover figcaption { left: 0; } .cap-right:before { bottom: 10px; right: 10px; } .cap-right figcaption { bottom: 0; right: -30%; } .cap-right:hover figcaption { right: 0; } .cap-top:before { top: 10px; left: 10px; } .cap-top figcaption { left: 0; top: -30%; } .cap-top:hover figcaption { top: 0; } .cap-bot:before { bottom: 10px; left: 10px; } .cap-bot figcaption { left: 0; bottom: -30%;} .cap-bot:hover figcaption { bottom: 0; }



    • Preview?
      Live Demo :   lll- DEMO -lll





    © Social Academy


    If you have any questions related to this topic create a topic with the following title:
    Image Slide in Caption



    Last edited by Joseph on Mon Apr 14, 2014 4:19 am; edited 1 time in total

    View user profile http://www.socialacademy.biz
    avatar
     
    Administrator
     Administrator

    Posted on Fri Mar 28, 2014 7:31 am

     


    Tutorial is Updated

    View user profile http://www.socialacademy.biz

    Message (Page 1 of 1)



      Share Topics Url

      Url
      BBcode
      HTML

      Permissions in this forum:
      You cannot reply to topics in this forum

       
      • Free forum | © PunBB | Free forum support | Contact | Report an abuse | Forumotion


      Social Academy Forum

         The Summer looks out from her brazen tower,
      Through the flashing bars of July.  

      © Social Academy 2013-2017