elementor info card with curved shape on hover

Описание: Download 1M+ code from https://codegive.com/c733185
creating an elementor info card with a curved shape that changes on hover can enhance the visual appeal of your website. in this tutorial, we will go through the steps to create this effect using elementor, along with some custom css to achieve the curved shape and hover transition.

step-by-step tutorial

1. create a new section in elementor

1. open your wordpress dashboard, navigate to the page you want to edit, and click on “edit with elementor.”
2. click the "+" icon to add a new section. choose a single-column layout for simplicity.

2. add an inner section

1. inside the new section, drag an "inner section" widget from the elementor panel into your column. this will allow for better control over the layout.

3. add the info card content

1. drag a "heading" widget into the first column of the inner section. this will be the title of your info card.
2. drag a "text editor" widget below the heading to add a description or content for the info card.
3. you can also add an "image" widget or an "icon" widget if you wish.

4. style the info card

1. click on the inner section (the one containing your heading and text).
2. go to the "style" tab:
**background**: set a background color (e.g., `ffffff`).
**border radius**: set a border radius (e.g., `20px`) to make the corners rounded.
**padding**: add some padding (e.g., `20px`) to create space inside the card.
**box shadow**: optionally, add a subtle box shadow for depth.

5. add custom css for hover effect

to achieve a curved shape on hover, you'll need to add some custom css. follow these steps:

1. navigate to the "advanced" tab of the inner section.
2. open the "custom css" panel (this requires elementor pro).
3. add the following css code:



6. preview and adjust

1. click on the "preview" button to see your info card in action.
2. adjust the values in the css if you want different effects (e.g., more or less curvature, different colors, etc.).

final result

after completing these ...

#Elementor #WebDesign #windows
Elementor
info card
curved shape
hover effect
interactive design
UI elements
web design
CSS animation
responsive layout
user engagement
visual appeal
graphic design
modern interface
premium widgets
dynamic content