Webdesign & Entwicklung

Transparente Boxen in Elementor (Wordpress)

Transparente Boxen in Elementor (Wordpress)

Wie erstellt man transparente Boxen in Elementor? Transparente Boxen auch Glassmorphism Boxes genannt sind der neuste Trend im Web Design.

Anleitung

Anforderungen:
  • WordPress Installation (lokal oder online)
  • Elementor PlugIn
  • Simple CSS & JS Plugin
Links:
Code:
transparenteBoxCSS
.page-id-65::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#F98F45,#97CECC);
  clip-path: circle(25% at 10% 10%);
}
.page-id-65::after
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#97CECC,#12908E);
  clip-path: circle(30% at right);
}

.box .elementor-widget-container
{
  display: flex;
  flex-wrap: wrap;
}

.box .elementor-widget-container .elementor-image-box-wrapper
{
  height: 400px;
/*   width: 300px; */
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 10%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(5px);
}

.box .elementor-widget-container .elementor-image-box-wrapper .elementor-image-box-description
{
  padding-top: 10px;
}

.box .elementor-widget-container .elementor-image-box-wrapper .elementor-image-box-content
{
  padding: 20px;
  padding-top: 90px;
  transform: translatey(200px);
  opacity: 0;
  transition: 0.5s;
}

.box .elementor-widget-container .elementor-image-box-wrapper:hover .elementor-image-box-content
{
  transform: translatey(0px);
  opacity: 1;
}
.box .elementor-widget-container .elementor-image-box-wrapper .elementor-image-box-img
{
  padding-top: 20px;
}
vanilla-tilt execute
VanillaTilt.init(document.querySelectorAll(".box .elementor-image-box-wrapper"), {
        max: 25,
        speed: 300,
  		glare: true,
  		"max-glare": 1,
    });