[dohtml]<center><div class="jsig" style="background-image:URL(http://placehold.it/500x200);"><div class="jsigimg"><a href="http://cttw.b1.jcink.com/index.php?showuser=2235"><img src="http://placehold.it/100x100"></a></div><div class="jsigblack"><div class="jsigtitle">your title</div> <div class="jsigsub"><a href="/">link 1</a> <a href="/">link 2</a> <a href="/">link 3</a> <a href="/">link 4</a> <a href="/">link 5</a></div> </div><div class="jsigorange"><div class="jsigback"></div><div class="jsigtext">hi there! thanks for using my code. as a friendly reminder, the link must stay on the image at all times as credit, or you must credit me in this part of the signature code with a link to my profile. thanks!</div></div><div class="jsigline"></div></div></center><link href="https://fonts.googleapis.com/css?family=Rajdhani:300,700" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300" rel="stylesheet"><style type="text/css">.jsig { width:500px; height:200px; overflow:hidden; position:relative; line-height: 12px; } .jsigimg { border-radius:100%; -webkit-border-radius:100%; -moz-border-radius:100%; border:10px solid white; width:100px; height:100px; overflow:hidden; position:absolute; left:90px; top:40px; z-index:2; transform:scale(0,0); -webkit-transform:scale(0,0); -moz-transform:scale(0,0); transition:.5s;  -webkit-transition:.5s; } .jsig:hover .jsigimg { transform:scale(1,1); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); transition:.5s; -webkit-transition:.5s;  } .jsigimg img { position:relative; } .jsigblack { width:500px; height:100px; background-color:#000; position:absolute; top:0px; left:500px; right:0px; transition:.5s; -webkit-transition:.5s; } .jsig:hover .jsigblack { left:0px; transition:.5s; -webkit-transition:.5s; } .jsigtitle { font-family:rajdhani; font-weight:300; color:#fff; font-size:35px; text-transform:uppercase; position:relative; top:40px; left:220px; text-align:left; line-height:20px;  } .jsigsub { line-height:20px; font-family:rajdhani; font-size:7px; letter-spacing:1px; font-weight:700; text-transform:uppercase; color:#000; text-align:left; position:relative; left:220px; top:44px; } .jsigsub a { background-color:#fff; padding:3px; margin-right:3px; text-decoration:none; color:#000; } .jsigorange { width:500px; height:100px; position:absolute; bottom:0px; right:500px; transition:.5s; background: #ea9e60; background: -moz-linear-gradient(top, #ea9e60 0%, #ec6b00 100%); background: -webkit-linear-gradient(top, #ea9e60 0%,#ec6b00 100%); background: linear-gradient(to bottom, #ea9e60 0%,#ec6b00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea9e60', endColorstr='#ec6b00',GradientType=0 ); } .jsig:hover .jsigorange { right:0px; } .jsigtext::-webkit-scrollbar { width: 1px; transition:.5s; -webkit-transition:.5s; } .jsigsub a:hover { background-color:#ea9e60; color:#fff; transition:.5s; -webkit-transition:.5s; } .jsigback { position:absolute; bottom:15px; left:220px; width:195px; height:70px; background-color:#000; opacity:.1; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .jsigtext { width:162px; height:40px; text-align:justify; padding-right:4px; overflow:auto; color:#fff; font-size:9px; font-family:source sans pro; font-weight:300; position:absolute; bottom:30px; left:235px; } .jsigtext::-webkit-scrollbar-track { background-color:#fff; } .jsigtext::-webkit-scrollbar-thumb { border: none; background-color:#000; } .jsigline { position:absolute; top:-300px; left:0px; z-index:1; background-color:#fff; width:1px; height:300px; transform:rotate(-30deg); transition:.5s; -webkit-transition:.5s; } .jsig:hover .jsigline { top:-20px; left:160px; transition:.5s; -webkit-transition:.5s; }</style>[/dohtml]