Подскажите код и .hover этих блоков

видел тут _fastfrag.ru

 

up

Код:

<div class='_sbcollapsable' style='padding: 10px;'>
<ul class="item50">
<a href="#"><li class="item55">
<div class="item60">
<i class="fa fa-vk" style="font-size: 40px;  margin-bottom: 10px;  };"></i>
Мы Вконтакте
</div>
</li></a>
<a href="#"><li class="item55">
<div class="item60">
<i class="fa fa-steam" style="font-size: 40px;  margin-bottom: 10px;  };"></i>
Мы В STEAM
</div>
</li>
</a>

</ul>

Код стиля:

.item50 {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item55 {
position: relative;
margin: 5px;
padding: 0;
max-width: 200px;
min-width: 100px;
-webkit-box-flex: 1;
-webkit-flex: 1 100px;
-ms-flex: 1 100px;
flex: 1 100px;
height: 100px;
text-align: center;
border-radius: 3px;
border: 2px solid rgba(152, 151, 151, 0.76);
background: rgba(152, 151, 151, 0.76);
cursor: pointer;
}
.item60 {
position: relative;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
color: #fff;
z-index: 10;
}

 

Edited 12 июня, 20159 yr by hawk2012

а

Код:

<div class='_sbcollapsable' style='padding: 10px;'>
<ul class="item50">
<a href="#"><li class="item55">
<div class="item60">
<i class="fa fa-vk" style="font-size: 40px;  margin-bottom: 10px;  };"></i>
Мы Вконтакте
</div>
</li></a>
<a href="#"><li class="item55">
<div class="item60">
<i class="fa fa-steam" style="font-size: 40px;  margin-bottom: 10px;  };"></i>
Мы В STEAM
</div>
</li>
</a>

</ul>

Код стиля:

.item50 {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item55 {
position: relative;
margin: 5px;
padding: 0;
max-width: 200px;
min-width: 100px;
-webkit-box-flex: 1;
-webkit-flex: 1 100px;
-ms-flex: 1 100px;
flex: 1 100px;
height: 100px;
text-align: center;
border-radius: 3px;
border: 2px solid rgba(152, 151, 151, 0.76);
background: rgba(152, 151, 151, 0.76);
cursor: pointer;
}
.item60 {
position: relative;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
color: #fff;
z-index: 10;
}

 

​а .hover  забыл(

	<div class='_sbcollapsable' style='padding: 10px;'>
		<ul class="item50">
<a href="https://vk.com/fastfrager"><li class="item55">
    <div class="item60">
      <i class="fa fa-vk" style="
    font-size: 40px;  margin-bottom: 10px;  };
"></i>
     Мы Вконтакте
    </div>
  </li></a>
<a href="http://steamcommunity.com/groups/fastfrager"><li class="item55">
    <div class="item60">
      <i class="fa fa-steam" style="
    font-size: 40px;  margin-bottom: 10px;  };
"></i>
     Мы В STEAM
    </div>
  </li></a>
</ul>
<style>
.item50 {
margin: 0;
padding: 0;
list-style: none;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.item55 {
position: relative;
margin: 5px;
padding: 0;
max-width: 200px;
min-width: 100px;
-webkit-box-flex: 1;
-webkit-flex: 1 100px;
-ms-flex: 1 100px;
flex: 1 100px;
height: 100px;
text-align: center;
border-radius: 3px;
border: 2px solid rgba(152, 151, 151, 0.76);
background: rgba(152, 151, 151, 0.76);
cursor: pointer;
}
.item60 {
position: relative;
height: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-transform: uppercase;
color: #fff;
z-index: 10;
}
.item55:before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 0;
height: 0;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-transition: .5s ease all, 2s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, 2s linear transform, 0s linear top, 0s linear left;
border-radius: 300px;
background: #fff;
z-index: 1;
}
.item55:hover:before {
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
border-radius: 0;
-webkit-transition: .5s ease all, .1s linear -webkit-transform, 0s linear top, 0s linear left;
transition: .5s ease all, .1s linear transform, 0s linear top, 0s linear left;
}
.item55:hover .item60 {
color: rgb(176, 176, 176);
}
</style>
</div>