(Free) Flip with Plus

Description

• item with text – plus icon, click plus will flip item
• view demo – password: abc
• my friend code this, send here some coffees

#1. Install code

#1.1. First, you need to add a Team Section (section with (i) icon)

#1.2. Make sure you choose Simple List

#1.3. Make sure you enabled Image, Title, Body

#1.4. At Content tab, add your desired image/text

#1.5. Hover on top right of Team Section > Click Edit Section

at Anchor Link, enter word: flip-with-plus

flip-with-plus

#1.6. Hover on page where you added Team > Click Gear icon

Click Advanced > Paste this code

<!-- 02.26c21v1 Flip with Plus -->
<style>
:root {
  --fwp-columns-desktop: 3;
  --fwp-columns-tablet: 2;
  --fwp-columns-mobile: 1;
  --fwp-gap: 100px;
  --fwp-gap-mobile: 36px;
  --fwp-image-ratio: 3/4;
  --fwp-radius: 28px;
  --fwp-blur: 8px;
  --fwp-image-scale: 1.05;
  --fwp-text-color: #fff;
  --fwp-overlay-color: rgba(0,0,0,0.85);
  --fwp-overlay-height: 45%;
  --fwp-plus-size: 48px;
  --fwp-plus-icon-size: 28px;
  --fwp-plus-color: #333;
}
</style>
<link rel="stylesheet" href="https://code.beaverhero.com/list/0226c21v1flipwithplus.css"/>
<script src="https://code.beaverhero.com/list/0226c21v1flipwithplus.js"></script>

#2. Customize

#2.1. To change number of columns on desktop – mobile, change these lines (Line 04 to Line 06)

--fwp-columns-desktop: 3;
--fwp-columns-tablet: 2;
--fwp-columns-mobile: 1;

#2.2. To change gap between items, change Line 07 – Line 08

--fwp-gap: 100px;
--fwp-gap-mobile: 36px;

#2.3. To remove round corners of item, find this line 10 and change 28px to 0px

--fwp-radius: 28px;

#2.4. To change overlay color in bottom of item, change Line 14

--fwp-overlay-color: rgba(0,0,0,0.85);

#2.5. To change flip text color, change line 13

--fwp-text-color: #fff;

#2.6. To change plus icon style, change Line 16, 17, 18

--fwp-plus-size: 48px;
--fwp-plus-icon-size: 28px;
--fwp-plus-color: #333;