I had a quick look at the template and I saw a section called Services. So I assume you want to create something similar with the 3 boxes and their icons that move when you put your mouse over them.
What I see on the template is that this is all pure CSS.
If you are unable to create this at your own, then you will need to study a bit the CSS of the demo site of the template with your browser's inspector, find any elements and their ids and classes that are involved and then find the css code that gives this style and moving effect.
To help you out I will put here the html of the Services section and the CSS that is involved.
<div class="t3-spotlight t3-spotlight-1 row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="t3-module module" id="Mod105">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<div class="ja-special-content">
<div class="circle-icon background-1"></div>
<h4>
<a href="/index.php/en/web-design">Web design</a>
</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incid dunt ut labore et dolore magna aliqua.
</p><a class="btn btn-link" href="/index.php/en/web-design">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="t3-module module" id="Mod111">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<div class="ja-special-content">
<div class="circle-icon background-2">
</div>
<h4>
<a href="/index.php/en/security-proofed">Cloud Solutions</a>
</h4>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have many suffered alteration in some form.
</p><a class="btn btn-link" href="/index.php/en/security-proofed">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=" col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="t3-module module" id="Mod112">
<div class="module-inner">
<div class="module-ct">
<div class="custom">
<div class="ja-special-content">
<div class="circle-icon background-3"></div>
<h4>
<a href="/index.php/en/coding">Coding</a>
</h4>
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
</p><a class="btn btn-link" href="/index.php/en/coding">Read more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the most important parts of the CSS - Note that this is only for Desktop view.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.col-lg-4 {
width: 33.33333333%;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
float: left;
}
.t3-module {
position: relative;
}
.t3-module .module-inner {
padding: 0;
}
.module-ct {
background: transparent;
color: inherit;
padding: 0;
font-size: 14px;
}
.ja-special-content {
text-align: center;
height: auto;
overflow: hidden;
height: 320px;
}
.circle-icon.background-1 {
background: #73bfe6;
}
.circle-icon {
border-radius: 150px;
display: inline-block;
height: 150px;
text-align: center;
line-height: 150px;
margin: 0 0 24px;
overflow: hidden;
width: 150px;
zoom: 1;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.circle-icon .fa {
color: #ffffff;
font-size: 40px;
line-height: 150px;
display: block;
overflow: hidden;
zoom: 1;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ja-special-content > h4 {
margin-top: -150px;
}
.ja-special-content > h4 {
font-size: 18px;
}
.ja-special-content > h4 {
color: #406a80;
font-family: 'Montserrat',sans-serif;
font-size: 16px;
margin-bottom: 12px;
margin-top: 0;
line-height: 1.5;
text-transform: uppercase;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.ja-special-content > h4 a {
color: #406a80;
text-decoration: none;
}
.ja-special-content > p {
font-size: 14px;
line-height: 24px;
margin: 0 0 12px;
}
.ja-special-content:hover .btn {
display: inline-block;
}
.ja-special-content .btn {
display: none;
}
.btn-link {
color: #73bfe6;
font-size: 14px;
text-transform: uppercase;
padding-left: 0;
padding-right: 0;
display: inline;
}
.btn-link:after {
content: "\f178";
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
margin-left: 12px;
}
.ja-special-content:hover .circle-icon {
-webkit-transform: translate(0,-360px);
-moz-transform: translate(0,-360px);
-o-transform: translate(0,-360px);
-ms-transform: translate(0,-360px);
transform: translate(0,-360px);
}
.ja-special-content:hover h4 {
margin-top: -150px;
}
Of course it's very likely that you might have to adjust the above code to meet your template's structure and overall styling. Also keep in mind that some of these style rules might conflict or affect other areas of your site.
