Jump to content

Ajutor Hook Partners

Alexander.

By Alexander.,
in IP.Board 3.x

 Share

Recommended Posts

KeNzO Rookie

KeNzO

Posted
Posted (edited) 
<div class="ipsSideBlock clearfix __xX20official20partners20">
<h3 id="anonymous_element_1"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links">×</a> Official Partners </h3>

 <figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-mic-c"></i></span></div>
    <h2>Team<span>Speak</span></h2>
    <div class="caption">
      <p>CONNECT</p>
    </div>
  </figcaption><a href="ts3server://ts.star-play.ro" target="_blank"></a>
</figure>

<figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-social-facebook"></i></span></div>
    <h2>FACE<span>BOOK</span></h2>
    <div class="caption">
      <p>OFFICIAL PAGE</p>
    </div>
  </figcaption><a href="https://www.facebook.com/gostarplayro/" target="_blank"></a>
</figure>

<figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-steam"></i></span></div>
    <h2>STEAM<span> GROUP</span></h2>
    <div class="caption">
      <p>OFFICIAL GROUP</p>
    </div>
  </figcaption><a href="http://steamcommunity.com/groups/star-play/" target="_blank"></a>
</figure>
  
</div>

Asta e codu

Edited by KeNzO
Link to comment
Share on other sites
strong Experienced

+strong

Posted
Posted
4 hours ago, KeNzO said: 

<div class="ipsSideBlock clearfix __xX20official20partners20">
<h3 id="anonymous_element_1"><a href="#" class="ipsSidebar_trigger ipsType_smaller right desc mod_links">×</a> Official Partners </h3>

 <figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-mic-c"></i></span></div>
    <h2>Team<span>Speak</span></h2>
    <div class="caption">
      <p>CONNECT</p>
    </div>
  </figcaption><a href="ts3server://ts.star-play.ro" target="_blank"></a>
</figure>

<figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-social-facebook"></i></span></div>
    <h2>FACE<span>BOOK</span></h2>
    <div class="caption">
      <p>OFFICIAL PAGE</p>
    </div>
  </figcaption><a href="https://www.facebook.com/gostarplayro/" target="_blank"></a>
</figure>

<figure class="snip1176"><img src="http://www.star-play.ro/forum/public/style_images/star-play/partnersbg.png" alt="sample80">
  <figcaption>
    <div class="icon"><span><i class="ion-steam"></i></span></div>
    <h2>STEAM<span> GROUP</span></h2>
    <div class="caption">
      <p>OFFICIAL GROUP</p>
    </div>
  </figcaption><a href="http://steamcommunity.com/groups/star-play/" target="_blank"></a>
</figure>
  
</div>

Asta e codu

Ii trebuie si CSS ca acel HTML sa mearga.

  

figure.snip1176{font-family:'Raleway',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:10px
1%;min-width:220px;max-width:245px;max-height:220px;width:100%;color:#fff;text-align:center;box-shadow:0 0 5px rgba(0, 0, 0, 0.15)}figure.snip1176
*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.45s ease-in-out;transition:all 0.45s ease-in-out}figure.snip1176
img{width:200%;position:relative;opacity:0.7}figure.snip1176
figcaption{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:13%;right:13%;border:1px
solid rgba(255, 255, 255, 0.8);border-width:0px 1px;background-color:rgba(0, 0, 0, 0.2)}figure.snip1176
h2{padding:15px
20px;margin:0;text-transform:uppercase;font-weight:400;letter-spacing:3px}figure.snip1176 h2
span{font-weight:800}figure.snip1176 .icon,
figure.snip1176
.caption{overflow:hidden;width:100%;position:absolute}figure.snip1176
.icon{-webkit-transform:translateY(-50%);transform:translateY(-50%);top:0}figure.snip1176
.caption{-webkit-transform:translateY(50%);transform:translateY(50%);bottom:0}figure.snip1176 p,
figure.snip1176 .icon
span{display:table;margin:0
auto;padding:0
10px;position:relative;text-align:center;width:auto;color:rgba(255, 255, 255, 0);font-size:0.8em}figure.snip1176 p:before,
figure.snip1176 .icon span:before,
figure.snip1176 p:after,
figure.snip1176 .icon span:after{position:absolute;height:1px;content:'';background:white;-webkit-transition:all 0.45s ease-in-out;transition:all 0.45s ease-in-out}figure.snip1176 .icon span:before,
figure.snip1176 .icon span:after{width:1000%;top:50%}figure.snip1176 .icon span:before{left:-1000%}figure.snip1176 .icon span:after{right:-1000%}figure.snip1176
i{color:white;font-size:30px}figure.snip1176 p:before,
figure.snip1176 p:after{width:150%;bottom:50%}figure.snip1176 p:before{left:-100%}figure.snip1176 p:after{right:-100%}figure.snip1176
a{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1}figure.snip1176:hover img,
figure.snip1176.hover
img{opacity:0.15;-webkit-transform:scale(1.1);transform:scale(1.1)}figure.snip1176:hover p,
figure.snip1176.hover
p{opacity:1;-webkit-transition-delay:0.35s;transition-delay:0.35s;color:#fff}figure.snip1176:hover p:before,
figure.snip1176.hover p:before{left:-150%}figure.snip1176:hover p:after,
figure.snip1176.hover p:after{right:-150%}.space
h3{margin:0
auto;text-align:left;font-family:Arial,Helvetica,sans-serif;color:#555}.icon-heart{width:15px;height:13px;color:#f00}.icon-heart:hover{-webkit-animation:heart 5s infinite;animation:heart 5s infinite}@keyframes
heart{0%{transform:scale(1.2,1.2)}25%{transform:scale(1,1)}50%{transform:scale(1.2,1.2)}75%{transform:scale(1,1)}100%{transform:scale(1.2,1.2)}}.logospace{cursor:pointer;width:400px;overflow:hidden}.logocircle{pointer-events:none;transition:all 0.7s ease-in-out;transform:rotateX(0deg)}.logospace:hover>.logocircle{transform:rotateX(360deg)}.logotext{pointer-events:none;transition:all 0.4s}.logospace:hover>.logotext{}.likebarh{overflow:hidden;height:20px;font-size:11px;display:inline-block;position:relative;width:97%;margin-bottom:3px;border-radius:0px;cursor:pointer;line-height:20px;transition:all 0.09s cubic-bezier(0.02,0.2,0.68,1.06)}.likebarh:hover{background:#369}.likebarh
.p1{transition:all 0.5s}.likebarh:hover
.p1{margin-top:-20px}.likebarh>paper-ripple{border-radius:0px;overflow:hidden}.menuh{position:relative;top:-100px;left:380px}figure.snip1176{font-family:'Raleway',Arial,sans-serif;position:relative;float:left;overflow:hidden;margin:3px
auto;min-width:220px;max-width:250px;max-height:100px;width:100%;color:#fff;text-align:center;box-shadow:0 0 5px rgba(0, 0, 0, 0.15)}figure.snip1176
*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.45s ease-in-out;transition:all 0.45s ease-in-out}figure.snip1176
img{max-width:100%;position:relative;opacity:0.7;margin-top:-60px}figure.snip1176
figcaption{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);left:13%;right:13%;border:1px
solid rgba(255, 255, 255, 0.8);border-width:0px 1px;background-color:rgba(0, 0, 0, 0.2)}figure.snip1176
h2{padding:15px
20px;margin:0;text-transform:uppercase;font-weight:400;letter-spacing:3px}figure.snip1176 h2
span{font-weight:800}figure.snip1176 .icon,
figure.snip1176
.caption{overflow:hidden;width:100%;position:absolute}figure.snip1176
.icon{-webkit-transform:translateY(-50%);transform:translateY(-50%);top:0}figure.snip1176
.caption{-webkit-transform:translateY(50%);transform:translateY(50%);bottom:0}figure.snip1176 p,
figure.snip1176 .icon
span{display:table;margin:0
auto;padding:0
10px;position:relative;text-align:center;width:auto;color:rgba(255, 255, 255, 0);font-size:0.8em}figure.snip1176 p:before,
figure.snip1176 .icon span:before,
figure.snip1176 p:after,
figure.snip1176 .icon span:after{position:absolute;height:1px;content:'';background:white;-webkit-transition:all 0.45s ease-in-out;transition:all 0.45s ease-in-out}figure.snip1176 .icon span:before,
figure.snip1176 .icon span:after{width:1000%;top:50%}figure.snip1176 .icon span:before{left:-1000%}figure.snip1176 .icon span:after{right:-1000%}figure.snip1176
i{color:white;font-size:30px}figure.snip1176 p:before,
figure.snip1176 p:after{width:150%;bottom:50%}figure.snip1176 p:before{left:-100%}figure.snip1176 p:after{right:-100%}figure.snip1176
a{left:0;right:0;top:0;bottom:0;position:absolute;z-index:1}figure.snip1176:hover img,
figure.snip1176.hover
img{opacity:0.15;-webkit-transform:scale(1.1);transform:scale(1.1)}figure.snip1176:hover p,
figure.snip1176.hover
p{opacity:1;-webkit-transition-delay:0.35s;transition-delay:0.35s;color:#fff}figure.snip1176:hover p:before,
figure.snip1176.hover p:before{left:-150%}figure.snip1176:hover p:after,
figure.snip1176.hover p:after{right:-150%}

 

 

— steam

Link to comment
Share on other sites
  • 3 weeks later...

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.

×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

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.

  I accept