Sidebar blocks

[+JuNNNNkie]

Cum se face acest gen de blocks in sidebar? vreau acel efect!   

[Alex.P]

Acel block il faci Custom Sidebar Block 

 

 

Edited August 3, 2016 by Alex.P

[Alex.P]

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>
	

[+JuNNNNkie]

Pe mine efectul ma intereseaza nu cum adaug in sidebar!! Si codu ala unde il adaug??

[+JuNNNNkie]

Cineva?

[Alex.P]

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 August 5, 2016 by Alex.P