Creating Dynamic Hover Effects to Change whole Icon Boxes in Elementor with CSS

how to choose css class elementor icon boxGoto Advanced Tab and add this css class name “hoverbox”

The CSS provided in the question can be used to change the styling of an icon box in Elementor when it is hovered over.

The first block of CSS applies a transformation and transition effect to the entire icon box when it is hovered over. The transformation scales the box up by 10%, while the transition effect smoothly transitions the change in size over a duration of 0.9 seconds, using a cubic-bezier timing function.

The next three blocks of CSS apply a transition effect to the icon, title, and description within the icon box. These elements will smoothly change color over a duration of 0.9 seconds when the icon box is hovered over.

The final three blocks of CSS define the new styling that will be applied to the icon, title, and description when the icon box is hovered over. In this case, the color of all three elements is changed to #4f4f4f (a dark grey color).

If you want to apply the same transition and hover effects to all elements within the icon box, you can use the second block of CSS provided in the question. This block combines the transitions for the icon, title, and description into a single rule, reducing the amount of code needed. The final block of CSS also combines the hover styles for the icon, title, and description into a single rule.

To use this CSS, you will need to add it to your website’s stylesheet or include it in a custom CSS plugin. Make sure to update the selectors to match the specific elements on your website. You may also want to adjust the transition and hover effects to meet your desired styling.

For more information on using CSS to style elements in Elementor, you can check out the Elementor documentation or read about CSS transitions and CSS transforms on the Mozilla Developer Network.

.elementor-icon-box-description{ transition: color .9s cubic-bezier(0.19, 1, 0.22, 1); }




This tutorial teaches you how to change the styling of an Elementor icon box when it is hovered over.

First, give your Elementor icon box a class name under Advanced > CSS Classes. For this tutorial, the class name used is “hoverbox”.

Then, add the following CSS to your page:

This code will change the color of the icon, title, and description when the icon box is hovered over, as well as cause the icon box to scale up slightly.

Alternatively, you can use the following optimized CSS code to achieve the same effect:

This will apply the same transition and color change to all three elements when the icon box is hovered.

To further improve your CSS skills, consider taking the CSS Course for Elementor users. This course offers advanced tutorials and techniques for creating unique and engaging designs. If it doesn’t meet your needs, there is a one-month, no-questions-asked money-back guarantee.

how to make PDF searchable

To make a PDF document searchable, you will need to use optical character recognition (OCR) software. OCR software is designed to recognize text within images and convert it into searchable and editable text.

Here is a basic step-by-step process for using OCR software to make a PDF searchable:

  1. Download and install OCR software on your computer. There are many OCR software programs available, both free and paid. Some popular options include Adobe Acrobat, ABBYY FineReader, and Tesseract.

  2. Open the PDF document in the OCR software.

  3. Select the option to perform OCR on the PDF. This option is usually found under a “Tools” or “Convert” menu.

  4. Choose the language of the text in the PDF. This is important because it allows the OCR software to accurately recognize the characters in the document.

  5. Select the pages of the PDF that you want to make searchable. You may have the option to select all pages, or you can choose specific pages to process.

  6. Click “Start” or “OCR” to begin the OCR process. This may take a few minutes, depending on the size of the PDF and the speed of your computer.

  7. Once the OCR process is complete, save the PDF with the recognized text. The text should now be searchable within the PDF.

Keep in mind that the accuracy of the OCR process can vary depending on the quality of the original PDF and the language of the text. It may be necessary to review the recognized text and make any necessary corrections.