Hover box fade in

How to?

  1. Add Call to Action widget to the content area and add a class to the box
  2. Style the box to match with mockup
  3. The important setting is the Style > Hover Effects, you have to set it to the same settings as screen shot below
  4. You may set the overlay color to make the content easier to read
  5. Add CSS below to move the title of the box up a bit

CSS:

				
					/* move title of the fade box up a bit */
.hover-slide-in div .elementor-cta__title {
    opacity: 1 !important;
    -webkit-transform: translateY(210px);
    -moz-transform: translateY(210px);
    transform: translateY(210px);
}

Example:

Managed IT Services

A monthly package that covers customized IT solutions, proactive maintenance, and unlimited support to boost your system performance and keep costs low
Read More