Jump to content
Sign in to follow this  
JuNNNNkie

Sidebar blocks

Recommended Posts

Scuzati dublu post dar nu am putut da edit 

 

Codul de la efect este 

	<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600);
figure.snip0068 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: center;
}
    figure.snip0068 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
    figure.snip0068 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
    figure.snip0068 figcaption {
  position: absolute;
  bottom: 0;
  left: 18%;
  right: 18%;
  height: 100%;
}
    figure.snip0068 figcaption > div {
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 50%;
}
    figure.snip0068 h3,
figure.snip0068 span {
  margin: 0;
  padding: 10px 15px;
  display: inline-block;
  width: 100%;
  font-weight: 800;
  text-transform: uppercase;
}
    figure.snip0068 h3 {
  background: #333333;
  position: relative;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
    figure.snip0068 span {
  background: #ffffff;
  color: #4d4d4d;
  -webkit-transform: translate3d(0%, -100%, 0);
  transform: translate3d(0%, -100%, 0);
}
    figure.snip0068 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
    figure.snip0068.blue {
  background: #0a212f;
}
    figure.snip0068.blue h3 {
  background: #2980b9;
}
    figure.snip0068.red {
  background: #4F86C6;
color:white;
}
    figure.snip0068.red h3 {
  background: #4F86C6;
color:white;
}
    figure.snip0068.yellow {
  background: #562e0a;
}
    figure.snip0068.yellow h3 {
  background: #e67e22;
}
    figure.snip0068:hover img,
figure.snip0068.hover img {
  opacity: 0.35;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
    figure.snip0068:hover figcaption h3,
figure.snip0068.hover figcaption h3 {
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);
}
    figure.snip0068:hover figcaption span,
figure.snip0068.hover figcaption span {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
</style>
<div>
<figure class="snip0068 red"><img src="http://i.imgur.com/A0PDBR5.png" alt="sampl31">
  <figcaption>
    <div class="__xXteamspeak203">
      <h3 id="anonymous_element_4"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links"></a>TEXT</h3>
    </div>
    <div><span>Click To Connect</span></div>
    <a href="gt://joinGame:game=cs&ip=89.34.25.21&port=27015"></a>
  </figcaption>
</figure>
</div>
	

Share this post


Link to post
Share on other sites

Acest cod il bagi in System Setting -> Ad Code Integration -> Sidebar Code

	<div class="ipsSideBlock clearfix __xXmelodia20su0103ptu0103me2nii __xXd7tsredplay.ro20-20teamspeak20server">
               <h3>DEVHELP.RO - TEAMSPEAK SERVER</h3>
               <div class="_sbcollapsable">
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,600);
figure.snip0068 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 0;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: center;
}
	figure.snip0068 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
	figure.snip0068 img {
  opacity: 1;
  width: 100%;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
	figure.snip0068 figcaption {
  position: absolute;
  bottom: 0;
  left: 18%;
  right: 18%;
  height: 100%;
}
	figure.snip0068 figcaption > div {
  overflow: hidden;
  width: 100%;
  position: relative;
  height: 50%;
}
	figure.snip0068 h3,
figure.snip0068 span {
  margin: 0;
  padding: 10px 15px;
  display: inline-block;
  width: 100%;
  font-weight: 800;
  text-transform: uppercase;
}
	figure.snip0068 h3 {
  background: #333333;
  position: relative;
  bottom: 0;
  left: 0;
  position: absolute;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
	figure.snip0068 span {
  background: #ffffff;
  color: #4d4d4d;
  -webkit-transform: translate3d(0%, -100%, 0);
  transform: translate3d(0%, -100%, 0);
}
	figure.snip0068 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
	figure.snip0068.blue {
  background: #0a212f;
}
	figure.snip0068.blue h3 {
  background: #2980b9;
}
	figure.snip0068.red {
  background: #36100c;
}
	figure.snip0068.red h3 {
  background: #c0392b;
}
	figure.snip0068.yellow {
  background: #562e0a;
}
	figure.snip0068.yellow h3 {
  background: #e67e22;
}
	figure.snip0068:hover img,
figure.snip0068.hover img {
  opacity: 0.35;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
	figure.snip0068:hover figcaption h3,
figure.snip0068.hover figcaption h3 {
  -webkit-transform: translate3d(0%, 100%, 0);
  transform: translate3d(0%, 100%, 0);
}
	figure.snip0068:hover figcaption span,
figure.snip0068.hover figcaption span {
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
}
</style>
<div>
<figure class="snip0068 red"><img src="http://redfear.ro/img/sbTeamSpeak_bg.png" alt="sampl31">
  <figcaption>
    <div class="__xXteamspeak203">
      <h3 id="anonymous_element_4"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links">?</a>TeamSpeak 3 DEVHELP.RO</h3>
    </div>
    <div><span>Click To Connect</span></div>
    <a href="ts3server://devhelp.ro?port=9967"></a>
  </figcaption>
</figure>
</div>
               </div>
            </div>
	

/spoiler]

Edited by Alex.P

Share this post


Link to post
Share on other sites

Join the conversation

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

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...