How to create a section with hover effect in Flatsome theme

Hello friends today I am going to show you how to create a section with hover effect flatsome theme for your website. You can add this feature section to various types of websites if you are using the number 1 selling woo commerce themes in theme forest i.e Flatsome.

You can add this section to show benefits of your services or products.

Before starting you have to download the SVG Support plugin, which you can download by clicking below link.

Also, You have to download the icons as per your need but make sure that all Icons should be in SVG format. I will recommend Flaticon where you can get loads of free icons for your website.

Before hovering the cursor on the column it will show like the below image
with white column and teal color icon.

After hovering the cursor on the column, column color will change and the icon as well text will be shown in white color.

Please note to change the icon color as per CSS you have to add the SVG icon as I mention earlier.

So, If you have downloaded the plugins and the icon which you need lets start.

Step 1

You have to copy below code and add it to your website. You may add it to Flatsome Block or directly to your page.

[section label="features" class="col-margin"]

[row]

[col span__sm="12"]

<h2 style="text-align: center;"><span style="font-size: 160%;"><span data-text-color="primary">So,</span> Why Work With Me</span></h2>
<p style="text-align: center;">Benefits you are about to fall in love with.</p>
[divider align="center" width="50px" color="rgb(51, 177, 172)"]


[/col]
[col span="3" span__sm="12" animate="fadeInUp"]

[row_inner style="large" class="col-hover"]

[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1377" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Mobile Friendly</h3>
<p>All the website made by me are mobile friendly. Which help the overall user experience, increase the conversion as well as it is good for SEO.</p>

[/featured_box]

[/col_inner]
[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1329" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Integration</h3>
<p>When making website I integrate all the important plugins like live chat and social media, which improve the conversion ratio of your website.</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="12" margin="200px 0px 0px 0px" animate="fadeInUp"]

[row_inner style="large" class="col-hover"]

[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1456" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Fast Website</h3>
<p>One of factor google take into consideration for ranking is speed. All my website are hosted in cloud hosting which boost the speed of the website</p>

[/featured_box]

[/col_inner]
[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1437" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Best Support</h3>
<p>I provide a quick help to you, in case if you face any issue with the website or for training on updating the content of website.</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="12" animate="fadeInUp"]

[row_inner style="large" class="col-hover"]

[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5" class="icon-rotate"]

[featured_box img="1462" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Free SSL</h3>
<p>If you make your website with us you will get free SSL certificate. SSL certificates increase the security of your website as well as it will also help you to rank higher on Google.</p>

[/featured_box]

[/col_inner]
[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1460" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Affordable Price</h3>
<p>I always try to keep the cost of the website as low as possible because one of my core value is "People over Profit"</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]
[col span="3" span__sm="12" margin="200px 0px 0px 0px" animate="fadeInUp"]

[row_inner style="large" class="col-hover"]

[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1469" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Easy to Use</h3>
<p>All the website made by are made using the most poplular CMS ie. WordPress which is consider as very easy to use CMS.</p>

[/featured_box]

[/col_inner]
[col_inner span__sm="12" padding="60px 30px 60px 30px" bg_color="rgb(255, 255, 255)" bg_radius="10" animate="bounceInUp" depth="2" depth_hover="5"]

[featured_box img="1342" font_size="small" icon_color="rgb(51, 177, 172)"]

<h3>Video Tutorials</h3>
<p>I make a lots of videos in Hindi about how to's in WordPress which will help you to train yourself for basic website editing.</p>

[/featured_box]

[/col_inner]

[/row_inner]

[/col]

[/row]

[/section]

Step 2

Now you have to copy this code to your CSS which you will find in Flatsome-Advance-custom CSS

/*********************COLUMN HOVER EFFECT******************/
.col-hover .col-inner:hover { background: #33b1ac !important; }
.col-hover .col-inner:hover .icon-box-img svg,
.col-hover .col-inner:hover .button,
.col-hover .col-inner:hover h3,
.col-hover .col-inner:hover p { color: white; }

/***********************NEGATIVE AND POSITIVE MARGIN**********/
@media only screen and (max-width: 767px) { 
.col-margin .col-inner { margin-top: 0!important; }}

You may also watch below video for to get the idea of how it is done.

That’s it and it is done. Your beautiful feature section is ready with hover effect.

you can change the color and of icon and hover color by changing the CSS and in the section.