Jump to content
  • But Nobody Came.

       (0 reviews)

    Character request, could also be used to display your own characters! Hover + 4 images; Please review! ❤️


    Actual Template Not Responsive

    info here! this will scroll! use tags to make it bold and pop!
    info here! this will scroll! use tags to make it bold and pop!
    info here! this will scroll! use tags to make it bold and pop!
    info here! this will scroll! use tags to make it bold and pop!

    Template code

    <link href="https://fonts.googleapis.com/css?family=Share+Tech+Mono" rel="stylesheet">
    <style>
     .mainpic {height: 549px; width: 350px; border: 15px solid black; position: relative; background-image: url(https://placehold.it/549x350); background-size: 100%}
     .mainpic:hover .maintint {opacity: 1; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out;}
     .maintint {height: 549px; width: 350px; background: rgba(168,139,104,.65); opacity: 0; transition: 1s ease-in-out; -webkit-transition: 1s ease-in-out; -moz-transition: 1s ease-in-out;-o-transition: 1s ease-in-out;}
     .smallpics1 {opacity: 0; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 15px; left: 15px;}
     .smalldesc1 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s; border: 7px solid white; position: absolute;padding: 5px; height: 90px; width: 165px; top: 15px; left: 145px; background: black;}
     .smalldesc1 b {color: yellow;}
     .mainpic:hover .smallpics1 {opacity: 1; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s;}
     .mainpic:hover .smalldesc1 {opacity: 1; transition: all 1s ease-in-out 1s; -moz-transition: all 1s ease-in-out 1s; -webkit-transition: all 1s ease-in-out 1s;}
     .smallpics2 {opacity: 0; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 145px; left: 15px;}
     .smalldesc2 {overflow: auto; font-family: 'Share Tech Mono', monospace;  font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 145px; left: 145px; background: black;}
     .smalldesc2 b {color: yellow;}
     .mainpic:hover .smallpics2 {opacity: 1; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s;}
     .mainpic:hover .smalldesc2 {opacity: 1; transition: all 1s ease-in-out 2s; -moz-transition: all 1s ease-in-out 2s; -webkit-transition: all 1s ease-in-out 2s;}
     .smallpics3 {opacity: 0; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 275px; left: 15px;}
     .smalldesc3 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 275px; left: 145px; background: black;}
     .smalldesc3 b {color: yellow;}
     .mainpic:hover .smallpics3 {opacity: 1; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s;}
     .mainpic:hover .smalldesc3 {opacity: 1; transition: all 1s ease-in-out 3s; -moz-transition: all 1s ease-in-out 3s; -webkit-transition: all 1s ease-in-out 3s;}
     .smallpics4 {opacity: 0; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s; border: 7px solid white; position: absolute; height: 100px; width: 100px; top: 405px; left: 15px;}
     .smalldesc4 {overflow: auto; font-family: 'Share Tech Mono', monospace; font-size: 12px; text-align: justify; color: white; opacity: 0; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s; border: 7px solid white; position: absolute; padding: 5px; height: 90px; width: 165px; top: 405px; left: 145px; background: black;}
     .smalldesc4 b {color: yellow;}
     .smalldesc4 h1 {margin-bottom: -10px; margin-top: 0px; line-height: 1;}
     .mainpic:hover .smallpics4 {opacity: 1; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s;}
     .mainpic:hover .smalldesc4 {opacity: 1; transition: all 1s ease-in-out 4s; -moz-transition: all 1s ease-in-out 4s; -webkit-transition: all 1s ease-in-out 4s;}
     .wantcred a {font-family: 'space mono', monospace; text-decoration: none; color: silver; font-size: 8px;}
    </style>
    <center><div class="mainpic"><div class="maintint"></div>
     <div class="smallpics1"><img src="https://placehold.it/100" style="height: 100%;"></div>
     <div class="smalldesc1">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
     <div class="smallpics2"><img src="https://placehold.it/100" style="height: 100%;"></div>
     <div class="smalldesc2">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
     <div class="smallpics3"><img src="https://placehold.it/100" style="height: 100%;"></div>
     <div class="smalldesc3">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
     <div class="smallpics4"><img src="https://placehold.it/100" style="height: 100%;"></div>
     <div class="smalldesc4">info here! this will scroll! use <b></b> tags to make it bold and pop!</div>
    <div class="wantcred"><center><a href="https://rpginitiative.com/profile/2592-penny/">♔</a></center></div>
    </div></center>



    User Feedback

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.

    Guest

×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.