Оформление блоков с иконками

В каждом из примеров сделано 2 варианта вывода иконки: шрифтом и графикой.

Пример 1:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-1">
	<i class="fa fa-home"></i>
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
</div>
<div class="iconblock-1">
	<div class="icon">
		<img src="icon.png" />
	</div>
	<h3>Блок 2</h3>
	<p>Иконка отображается графическим файлом</p>
</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-1 {
	margin:10px 0;
	transition: all 0.7s ease 0s;
	text-align:center;
}
.iconblock-1 i, 
.iconblock-1 .icon {
	font-size:64px;
	color:#80C6FF;
	border: 6px double #80C6FF;
	display: block;
	height: 64px;
	width:64px;
	margin:0 auto;
	text-align: center;
	padding:18px;
	border-radius:100px;
	box-sizing: content-box;
}
.iconblock-1:hover i, 
.iconblock-1:hover .icon{
	transition: all 0.7s ease 0s;
	border: 6px double #fff;
	color:#fff;
	background: #337AB7; 
}
.iconblock-1 h3{
	transition: all 0.7s ease 0s;
    color: #337AB7;
    position: relative;
    display:inline-block;	
	margin:0 0 6px 0;
	padding:6px;
	font-size:20px;
}	
.iconblock-1:hover h3{
	color: #000;
}	
.iconblock-1 h3:before {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height:2px;
    background: #337AB7;
    content: '';
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(6px);
}
.iconblock-1:hover h3:before,
.iconblock-1:focus h3:before {
    opacity: 1;
    transform: translateY(0px);
}

.iconblock-1 {

margin:10px 0;

transition: all 0.7s ease 0s;

text-align:center;

}

.iconblock-1 i,

.iconblock-1 .icon {

font-size:64px;

color:#80C6FF;

border: 6px double #80C6FF;

display: block;

height: 64px;

width:64px;

margin:0 auto;

text-align: center;

padding:18px;

border-radius:100px;

box-sizing: content-box;

}

.iconblock-1:hover i,

.iconblock-1:hover .icon{

transition: all 0.7s ease 0s;

border: 6px double #fff;

color:#fff;

background: #337AB7;

}

.iconblock-1 h3{

transition: all 0.7s ease 0s;

color: #337AB7;

position: relative;

display:inline-block;

margin:0 0 6px 0;

padding:6px;

font-size:20px;

}

.iconblock-1:hover h3{

color: #000;

}

.iconblock-1 h3:before {

position: absolute;

top: 100%;

right: 0;

width: 100%;

height:2px;

background: #337AB7;

content: '';

opacity: 0;

transition: opacity 0.3s, transform 0.3s;

transform: translateY(6px);

}

.iconblock-1:hover h3:before,

.iconblock-1:focus h3:before {

opacity: 1;

transform: translateY(0px);

}

Пример 2:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-2">
	<div class="icon">
		<i class="fa fa-globe"></i>
	</div>
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
</div>
<div class="iconblock-2">
	<div class="icon">
		<img src="icon.png" />
	</div>
	<h3>Блок 2</h3>
	<p>Иконка отображается графическим файлом</p>
</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-2 {
	text-align: center;
	padding: 12px;
}
.iconblock-2 .icon {
	transition: all 1s ease;
	position: relative;
	height: 64px;
	width: 64px;
	border-radius: 50%;
	border: 4px solid #BDE1FF;
	margin: 0 auto;
	font-size: 64px;
	color: #337AB7;
	padding: 20px;
	box-sizing: content-box;	
}
.iconblock-2:hover .icon {
	border: 4px solid #337AB7;
}
.iconblock-2 .icon i,
.iconblock-2 .icon img {
	position: relative;
	z-index: 2;
	height: 64px;
	width: 64px;
}
.iconblock-2 .icon:before {
	content: "";
	height: 60px;
	width: 112px;
	position: absolute;
	top: 22px;
	left:-4px;
	background-color: #FFF;
	transition: all 0.3s ease;
	z-index: 1;
}
.iconblock-2:hover .icon:before {
	transform: rotate(90deg);
}
.iconblock-2 h3{
	transition: all 0.2s ease 0s;
	color: #337AB7;
	font-size:20px;
	margin:8px 0;
}    
.iconblock-2:hover h3{
	color: #000;
	transform: translateY(-5px);
}

.iconblock-2 {

text-align: center;

padding: 12px;

}

.iconblock-2 .icon {

transition: all 1s ease;

position: relative;

height: 64px;

width: 64px;

border-radius: 50%;

border: 4px solid #BDE1FF;

margin: 0 auto;

font-size: 64px;

color: #337AB7;

padding: 20px;

box-sizing: content-box;

}

.iconblock-2:hover .icon {

border: 4px solid #337AB7;

}

.iconblock-2 .icon i,

.iconblock-2 .icon img {

position: relative;

z-index: 2;

height: 64px;

width: 64px;

}

.iconblock-2 .icon:before {

content: "";

height: 60px;

width: 112px;

position: absolute;

top: 22px;

left:-4px;

background-color: #FFF;

transition: all 0.3s ease;

z-index: 1;

}

.iconblock-2:hover .icon:before {

transform: rotate(90deg);

}

.iconblock-2 h3{

transition: all 0.2s ease 0s;

color: #337AB7;

font-size:20px;

margin:8px 0;

}

.iconblock-2:hover h3{

color: #000;

transform: translateY(-5px);

}

Пример 3:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-3">
	<div class="icon">
    <i class="fa fa-trophy"></i>
	</div>
    <h3>Блок 1</h3>
    <p>Иконка отображается шрифтом "Font Awesome"</p>
</div>
<div class="iconblock-3">
    <div class="icon">
        <img src="icon.png" />
    </div>
    <h3>Блок 2</h3>
    <p>Иконка отображается графическим файлом</p>
</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-3 {
	margin:10px 0;
	text-align:center;
}
.iconblock-3 .icon {        
	color: #FFF;                   
	background: #337AB7;      
	width: 100px;           
	height: 100px;                  
	padding: 18px;           
	font-size: 64px;                
	transform: rotate(45deg);                   
	margin: 40px auto;
	box-sizing: border-box;
}
.iconblock-3 .icon i, 
.iconblock-3 .icon img {        
	transform: rotate(-45deg);
	width: 64px;           
	height: 64px;  
}
.iconblock-3 .icon:before {
	content: '';   
	border: 4px solid #337AB7;          
	position: absolute;         
	top: 4px;           
	right: 4px;         
	bottom: 4px;           
	left: 4px;            
	transition-duration: .3s;            
}
.iconblock-3:hover .icon:before {
	top: -8px;       
	right: -8px;          
	bottom: -8px;          
	left: -8px
}
.iconblock-3 h3{
	transition: all 0.7s ease 0s;
    color: #337AB7;
	font-size:20px;
	margin:0 0 6px 0;
	padding:6px;
}	
.iconblock-3:hover h3 {
	color: #000;
}

.iconblock-3 {

margin:10px 0;

text-align:center;

}

.iconblock-3 .icon {

color: #FFF;

background: #337AB7;

width: 100px;

height: 100px;

padding: 18px;

font-size: 64px;

transform: rotate(45deg);

margin: 40px auto;

box-sizing: border-box;

}

.iconblock-3 .icon i,

.iconblock-3 .icon img {

transform: rotate(-45deg);

width: 64px;

height: 64px;

}

.iconblock-3 .icon:before {

content: '';

border: 4px solid #337AB7;

position: absolute;

top: 4px;

right: 4px;

bottom: 4px;

left: 4px;

transition-duration: .3s;

}

.iconblock-3:hover .icon:before {

top: -8px;

right: -8px;

bottom: -8px;

left: -8px

}

.iconblock-3 h3{

transition: all 0.7s ease 0s;

color: #337AB7;

font-size:20px;

margin:0 0 6px 0;

padding:6px;

}

.iconblock-3:hover h3 {

color: #000;

}

Пример 4:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-4">
	<div class="icon">
		<i class="fa fa-bus"></i>
	</div>
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
</div>
<div class="iconblock-4">
	<div class="icon">
		<img src="icon.png">
	</div>
	<h3>Блок 2</h3>
	<p>Иконка отображается графическим файлом</p>
</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-4 {
	width: 100%;
	border: 1px solid #C5C5C5;
	padding: 8px;
	text-align: center;
	transition: 0.4s all;
	overflow:hidden;
	margin:20px 0;
}	
.iconblock-4:hover {
	box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.2);
}
.iconblock-4 .icon {
	margin: 20px auto; 
	transition: all 0.7s ease 0s;
	font-size: 64px;
	width:64px;
	height:64px;
	color:#337AB7;
}
.iconblock-4:hover .icon , 
.iconblock-4:hover .icon {
	transform: scale(20);
	position:relative;
	opacity:0;
}	  
.iconblock-4 h3{
    transition: all 0.7s ease 0s;
    color: #000;
    font-size:20px;
    margin:0 0 6px 0;
    padding:6px;
}    
.iconblock-4:hover h3 {
    color: #337AB7;
	transform: translateY(-44px) scale(1.3);
}

.iconblock-4 {

width: 100%;

border: 1px solid #C5C5C5;

padding: 8px;

text-align: center;

transition: 0.4s all;

overflow:hidden;

margin:20px 0;

}

.iconblock-4:hover {

box-shadow: 0px 10px 20px 0 rgba(0, 0, 0, 0.2);

}

.iconblock-4 .icon {

margin: 20px auto;

transition: all 0.7s ease 0s;

font-size: 64px;

width:64px;

height:64px;

color:#337AB7;

}

.iconblock-4:hover .icon ,

.iconblock-4:hover .icon {

transform: scale(20);

position:relative;

opacity:0;

}

.iconblock-4 h3{

transition: all 0.7s ease 0s;

color: #000;

font-size:20px;

margin:0 0 6px 0;

padding:6px;

}

.iconblock-4:hover h3 {

color: #337AB7;

transform: translateY(-44px) scale(1.3);

}

Пример 5:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-5">
	<div class="icon">
		<i class="fa fa-paw"></i>
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 -10 300 320" xml:space="preserve">           
			<polygon points="22.3,223.7 22.3,76.3 150,2.5 277.7,76.3 277.7,223.7 150,297.5"/>
			<path d="M150,4.8l125.7,72.6v145.2L150,295.2L24.3,222.6V77.4L150,4.8 M150,0.2L20.3,75.1v149.8L150,299.8l129.7-74.9V75.1L150,0.2 L150,0.2z"/>            
		</svg>
	</div>
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
</div>
<div class="iconblock-5">
	<div class="icon">
		<img src="icon-5.png">
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0 -10 300 320" xml:space="preserve">           
			<polygon points="22.3,223.7 22.3,76.3 150,2.5 277.7,76.3 277.7,223.7 150,297.5"/>
			<path d="M150,4.8l125.7,72.6v145.2L150,295.2L24.3,222.6V77.4L150,4.8 M150,0.2L20.3,75.1v149.8L150,299.8l129.7-74.9V75.1L150,0.2 L150,0.2z"/>            
		</svg>
	</div>
	<h3>Блок 2</h3>
	<p>Иконка отображается графическим файлом</p>
</div>

</svg>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</svg>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-5 {
	position: relative;
	margin:60px 0 20px 0;
	border: 1px solid #C5C5C5;
	transition: transform 300ms ease, box-shadow 300ms ease;
	text-align:center;
}
.iconblock-5 .icon {
    display: block;
    position: absolute;
    left: 50%;
    width: 80px;
	transform: translate(-50%, -50%); 
}
.iconblock-5 .icon i,
.iconblock-5 .icon img
{
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 32px;
	transform: translate(-50%, -50%); 
	color: #337AB7;
	width: 32px;
	height: 32px;
}
.iconblock-5 .icon svg path {
	stroke-width: 8px;
	stroke: #BDE1FF;
	transition: stroke 300ms ease; 	  
}
.iconblock-5 .icon svg polygon {
	fill: white; 
}	  
.iconblock-5 h3 {
    transition: all 0.7s ease 0s;
    color: #337AB7;
    font-size:20px;
    margin:50px 0 10px 0;
}    
.iconblock-5:hover h3 {
    color: #000;
}  
.iconblock-5:hover {
	transform: translateY(-10px);
	box-shadow: 0px 7px 10px 1px rgba(84, 84, 84, 0.5); 		
}
.iconblock-5:hover .icon svg path {
	stroke: #337AB7; 
}

.iconblock-5 {

position: relative;

margin:60px 0 20px 0;

border: 1px solid #C5C5C5;

transition: transform 300ms ease, box-shadow 300ms ease;

text-align:center;

}

.iconblock-5 .icon {

display: block;

position: absolute;

left: 50%;

width: 80px;

transform: translate(-50%, -50%);

}

.iconblock-5 .icon i,

.iconblock-5 .icon img

{

position: absolute;

top: 50%;

left: 50%;

font-size: 32px;

transform: translate(-50%, -50%);

color: #337AB7;

width: 32px;

height: 32px;

}

.iconblock-5 .icon svg path {

stroke-width: 8px;

stroke: #BDE1FF;

transition: stroke 300ms ease;

}

.iconblock-5 .icon svg polygon {

fill: white;

}

.iconblock-5 h3 {

transition: all 0.7s ease 0s;

color: #337AB7;

font-size:20px;

margin:50px 0 10px 0;

}

.iconblock-5:hover h3 {

color: #000;

}

.iconblock-5:hover {

transform: translateY(-10px);

box-shadow: 0px 7px 10px 1px rgba(84, 84, 84, 0.5);

}

.iconblock-5:hover .icon svg path {

stroke: #337AB7;

}

Пример 6:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-6">
	<div class="top">
		<div class="pic">
			<img src="pic.png" />
		</div>
		<div class="icon">
			<i class="fa fa-bell"></i>
		</div>
	</div>
	<div class="body">
		<h3>Блок 1</h3>
		<p>Иконка отображается шрифтом "Font Awesome"</p>
	</div>
</div>
<div class="iconblock-6">
	<div class="top">
		<div class="pic">
			<img src="pic.png" />
		</div>
		<div class="icon">
			<img src="icon-6.png" />
		</div>
	</div>
	<div class="body">
		<h3>Блок 2</h3>
		<p>Иконка отображается графическим файлом</p>
	</div>
</div>

</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-6 {
    background: #FFF;
    margin: 20px 0;
	border: 1px solid #C5C5C5;
	box-shadow: 0 4px 4px 0 rgba(84, 84, 84, 0.3);
}
.iconblock-6 .top {
    position: relative;
    z-index: 1;
    height: 100px;
}
.iconblock-6 .top .pic {
    position: relative;
    z-index: 1;
    height: 100px;
	overflow: hidden;
    transition: all 0.3s;
}
.iconblock-6:hover .top .pic {
    height: 180px;
}
.iconblock-6 .top .pic img {
    position: absolute;
    z-index: -1;
    top: -35%;
    transition: all 0.3s;
    width:100%;
}
.iconblock-6:hover .top .pic img {
    top: 0;
}
.iconblock-6 .top .pic:before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.3);
}
.iconblock-6:hover .top .pic:before {
    background: rgba(255, 255, 255, 0);
}
.iconblock-6 .top .icon {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -10px, 0);
    transition: all 0.3s;
}
.iconblock-6:hover .top .icon {
    transform: translate3d(-50%, -20px, 0);
}
.iconblock-6 .top .icon img,
.iconblock-6 .top .icon i
{
    border-radius: 50%;
    border: 2px solid #337AB7;
	font-size: 64px;
	color: #337AB7;
	padding:28px;
	box-sizing: content-box;  
	width:64px;
	height:64px;
	background: linear-gradient(to top, #BDE1FF, #FFF);
}
.iconblock-6:hover .top .icon img,
.iconblock-6:hover .top .icon i
{
	background: #FFF;
}
.iconblock-6 .body {
    text-align: center;
    margin-top: 90px;
}
.iconblock-6 h3 {
    transition: all 0.7s ease 0s;
    color: #337AB7;
    font-size:20px;
    margin:10px 0;
}    
.iconblock-6:hover h3 {
    color: #000;
}

.iconblock-6 {

background: #FFF;

margin: 20px 0;

border: 1px solid #C5C5C5;

box-shadow: 0 4px 4px 0 rgba(84, 84, 84, 0.3);

}

.iconblock-6 .top {

position: relative;

z-index: 1;

height: 100px;

}

.iconblock-6 .top .pic {

position: relative;

z-index: 1;

height: 100px;

overflow: hidden;

transition: all 0.3s;

}

.iconblock-6:hover .top .pic {

height: 180px;

}

.iconblock-6 .top .pic img {

position: absolute;

z-index: -1;

top: -35%;

transition: all 0.3s;

width:100%;

}

.iconblock-6:hover .top .pic img {

top: 0;

}

.iconblock-6 .top .pic:before {

content: '';

position: absolute;

z-index: 1;

width: 100%;

height: 100%;

top: 0;

left: 0;

background: rgba(255, 255, 255, 0.3);

}

.iconblock-6:hover .top .pic:before {

background: rgba(255, 255, 255, 0);

}

.iconblock-6 .top .icon {

position: absolute;

z-index: 1;

left: 50%;

top: 50%;

transform: translate3d(-50%, -10px, 0);

transition: all 0.3s;

}

.iconblock-6:hover .top .icon {

transform: translate3d(-50%, -20px, 0);

}

.iconblock-6 .top .icon img,

.iconblock-6 .top .icon i

{

border-radius: 50%;

border: 2px solid #337AB7;

font-size: 64px;

color: #337AB7;

padding:28px;

box-sizing: content-box;

width:64px;

height:64px;

background: linear-gradient(to top, #BDE1FF, #FFF);

}

.iconblock-6:hover .top .icon img,

.iconblock-6:hover .top .icon i

{

background: #FFF;

}

.iconblock-6 .body {

text-align: center;

margin-top: 90px;

}

.iconblock-6 h3 {

transition: all 0.7s ease 0s;

color: #337AB7;

font-size:20px;

margin:10px 0;

}

.iconblock-6:hover h3 {

color: #000;

}

Пример 7:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-7">
	<div class="icon">	
		<i class="fa fa-birthday-cake"></i>
	</div>
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
</div>		
<div class="iconblock-7">
	<div class="icon">	
		<img src="icon-7.png" />
	</div>
	<h3>Блок 2</h3>
	<p>Иконка отображается графическим файлом</p>
</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-7 {
	margin: 20px 0;
	border: 1px solid #C5C5C5;
	width:100%;
	padding: 12px;
	display: table;
}
.iconblock-7 .icon {
	display: table-cell;
	vertical-align: top;
	width: 60px;
	padding: 12px 12px 0 0;
	text-align:center;
}
.iconblock-7 .icon i,
.iconblock-7 .icon img {
	font-size:32px;
	color: #BDE1FF;
	transition: all .4s;
	width: 32px;
	height: 32px;
}
.iconblock-7 .icon img {
	opacity: .6;
}
.iconblock-7:hover .icon i,
.iconblock-7:hover .icon img {
	font-size:48px;
	color: #337AB7;
	transform: rotate(-360deg);
	width: 48px;
	height: 48px;
	opacity: 1;
}
.iconblock-7 h3 {
	transition: all 0.7s ease 0s;
	color: #337AB7;
	font-size:20px;
	margin:10px 0;
}    
.iconblock-7:hover h3 {
	color: #000;
}

.iconblock-7 {

margin: 20px 0;

border: 1px solid #C5C5C5;

width:100%;

padding: 12px;

display: table;

}

.iconblock-7 .icon {

display: table-cell;

vertical-align: top;

width: 60px;

padding: 12px 12px 0 0;

text-align:center;

}

.iconblock-7 .icon i,

.iconblock-7 .icon img {

font-size:32px;

color: #BDE1FF;

transition: all .4s;

width: 32px;

height: 32px;

}

.iconblock-7 .icon img {

opacity: .6;

}

.iconblock-7:hover .icon i,

.iconblock-7:hover .icon img {

font-size:48px;

color: #337AB7;

transform: rotate(-360deg);

width: 48px;

height: 48px;

opacity: 1;

}

.iconblock-7 h3 {

transition: all 0.7s ease 0s;

color: #337AB7;

font-size:20px;

margin:10px 0;

}

.iconblock-7:hover h3 {

color: #000;

}

Пример 8:

Блок 1

Иконка отображается шрифтом "Font Awesome"

Блок 2

Иконка отображается графическим файлом

<div class="iconblock-8">
	<div class="icon">
		<i class="fa fa fa-magic"></i>
	</div> 
	<div class="block">
	<h3>Блок 1</h3>
	<p>Иконка отображается шрифтом "Font Awesome"</p>
	</div>
</div>
<div class="iconblock-8">
	<div class="icon">
		<img src="icon-8.png" />
	</div> 
	<div class="block">
		<h3>Блок 2</h3>
		<p>Иконка отображается графическим файлом</p>
	</div>
</div>

</div>

<p>Иконка отображается шрифтом "Font Awesome"</p>

</div>

</div>

<p>Иконка отображается графическим файлом</p>

</div>

.iconblock-8 {
	margin: 10px 0;
	padding-right:10px;
}
.iconblock-8 .icon {
	float: right;
	text-align: center;
	position: relative;
	top: 5px;
	left: 5px;
	width: 64px;
	height: 80px;
	background: #337AB7;
	color: #fff; 
	transition: all .3s;
	transform: skew(-20deg);
	margin-left:30px;
}
.iconblock-8 .icon i,
.iconblock-8 .icon img {
	font-size: 32px;
	height:32px;
	width:32px;
	color: #fff; 
	padding-top:24px;
	z-index:1;
	position: relative;
	box-sizing: content-box;
	transform: skew(20deg);
}
.iconblock-8:hover .icon {
	top: 0;
	left: 0;
}
.iconblock-8:hover .icon {
	box-shadow: 8px 8px #BDE1FF;
}
.iconblock-8 .block {
	overflow: hidden;
	text-align: right;
}
.iconblock-8 h3 {
	transition: all 0.7s ease 0s;
	color: #337AB7;
	font-size:20px;
	margin:10px 0;
}    
.iconblock-8:hover h3 {
	color: #000;
}

.iconblock-8 {

margin: 10px 0;

padding-right:10px;

}

.iconblock-8 .icon {

float: right;

text-align: center;

position: relative;

top: 5px;

left: 5px;

width: 64px;

height: 80px;

background: #337AB7;

color: #fff;

transition: all .3s;

transform: skew(-20deg);

margin-left:30px;

}

.iconblock-8 .icon i,

.iconblock-8 .icon img {

font-size: 32px;

height:32px;

width:32px;

color: #fff;

padding-top:24px;

z-index:1;

position: relative;

box-sizing: content-box;

transform: skew(20deg);

}

.iconblock-8:hover .icon {

top: 0;

left: 0;

}

.iconblock-8:hover .icon {

box-shadow: 8px 8px #BDE1FF;

}

.iconblock-8 .block {

overflow: hidden;

text-align: right;

}

.iconblock-8 h3 {

transition: all 0.7s ease 0s;

color: #337AB7;

font-size:20px;

margin:10px 0;

}

.iconblock-8:hover h3 {

color: #000;

}

СЕРГЕЙ: 26.03.2023 в 20:33

Подскажите пожалуйста! Как обернуть каждый блок ссылкой? Чтобы он весь стал кликабельным. Для каждого отдельная ссылка нужда.

Ответить
- СЕРГЕЙ: 27.03.2023 в 13:24
  
  Всё, разобрался!)) Всё как обычно, с этого сайта, работает!
  
  Ответить
Андрей Ануфриев: 30.12.2021 в 06:19

Отличный вариант оформления! Спасибо!
Всё с Новым годом! ;0)

Ответить
MasterCss: 07.12.2021 в 17:38

Добрый день. Спасибо за примеры!

Ответить
Ivan: 08.08.2021 в 13:31

Спасибо, чтобы я без вас делал)

Ответить
PiVirus: 22.10.2020 в 19:41

Пример 5: что то косяки у меня, то ли в хроме дело толи лыжи не едут, в общем при ховере на елемент, svg не много потрясывает как то не понятно, лево право и саму иконку внутри потрясывает вних верх. Как будто все постепенно происходит. Врубиться не могу

Ответить
- PiVirus: 22.10.2020 в 19:50
  
  Присмотрелся, этот глюк не у всех. Организовал 2 ряда по 5 блоков из примера 5, из них svg трясуться только первые 2 блока в каждом ряду
  
  Ответить
Александр: 24.01.2020 в 09:32

Круто! Спасибо

Ответить
Антон: 14.12.2019 в 00:38

Здравствуйте. Подскажите, как сделать, чтобы один блок был на 4 иконки по горизонтали, или 8 иконок 4 сверху и 4 снизу например. Понравился пример 1 и 2. И эта вёрстка адаптивная под мобильную версию?
Заранее спасибо.

Ответить
- Alexander: 15.12.2019 в 10:23
  
  Тут сам блок имеет 100% ширину.
  Чтобы их раскладывать по 4 в ряд, нужно использовать сетку и размещать их там.
  Мне удобнее всего всего bootstrap сетка.
  Если у вас сайт имеет мобильную версию, то сетка там уже скорее всего какая-то есть. Нужно лишь вложить в нее эти блоки.
  Или можно самому сделать сетку или просто задать блокам точную ширину, например 400px и разместить их в ряд
  
  Ответить
Alex: 11.10.2017 в 08:30

Прикольно придумано

Ответить

Пример 1:

Блок 1

Блок 2

Пример 2:

Блок 1

Блок 2

Пример 3:

Блок 1

Блок 2

Пример 4:

Блок 1

Блок 2

Пример 5:

Блок 1

Блок 2

Пример 6:

Блок 1

Блок 2

Пример 7:

Блок 1

Блок 2

Пример 8:

Блок 1

Блок 2

Смотрите также:

Добавить комментарий:

Комментарии: