Ajutor Hook Partners

Alexander. · December 9, 2017

Buna ziua ,as dorii daca se poate sa imi explice careva cum pot face asta ? http://prntscr.com/hl514c

Cum pot pune aia si eu pe forum gen ,care e hook-ul ? multumesc anticipat ,las poza mai jos.

http://prntscr.com/hl514c

DeNyS. · December 9, 2017

Nu e hook, este cod HTML / CSS cu animații. Lasă link-ul de la forum ca să iți dăm sursa.

Alexander. · December 9, 2017

6 minutes ago, DeNyS. said:

Nu e hook, este cod HTML / CSS cu animații. Lasă link-ul de la forum ca să iți dăm sursa.

http://star-play.ro/

Poftim!

Alexander. · December 10, 2017

Ma ajuta cineva ?.................

KeNzO · December 10, 2017

<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 December 10, 2017 by KeNzO

Alexander. · December 10, 2017

Multumesc mult ,puteti da t/c

+strong · December 10, 2017

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%}

KeNzO · December 10, 2017

@strongtaz Am uitat de CSS

sluskeebeleaua · December 31, 2017

Salut. Imi puteti si mie spune unde bag fiecare?

Sign In

Ajutor Hook Partners

Recommended Posts

Alexander.

DeNyS.

Alexander.

Alexander.

KeNzO

Alexander.

+strong

KeNzO

sluskeebeleaua

Please sign in to comment

Recently Browsing 0 members

Activity

Browse

Important Information