diff --git a/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md b/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md
index 66964cbe3b4ed1feb385f218b3d8e928ec3db330..46f2c9d5935418a858ca0da7018eefb4dbe67cd7 100644
--- a/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md
+++ b/content/projekte/hack-n-fun/freizeiten/hacknsun/index.md
@@ -9,7 +9,7 @@ image = "loeten_wiese.jpg"
 alt = "Mehere Kinder beim Löten in einem Pavillon auf einer Wiese"
 +++
 
-{{ hero_section(background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=true) }}
+{{ hero_section(background_img="loeten_wiese.jpg", background_alt="Mehrere Kinder beim Löten in einem Pavillon auf einer Wiese", background_transparent=false) }}
 
 {% photo_section(title="Computer und Draußen, so viel du magst", img="hacken_am_lagerfeuer.jpg", alt="Kinder mit Laptops an einer Lagerfeuerstelle", credit="Dominik George, CC-BY-SA") %}
 Bei Hack'n'Sun geht es um genau das, was der Name sagt – Hacken, also das Basteln mit Technik,
diff --git a/sass/_utils.scss b/sass/_utils.scss
index 3162dfa9c06cfe3dcf470d54bd53c8bc1968ce8f..96bf1c2cd1b3c2643c2aacdf308d3bf9c201ff8d 100644
--- a/sass/_utils.scss
+++ b/sass/_utils.scss
@@ -46,6 +46,15 @@ figure.image>figcaption {
       .box {
         color: black;
       }
+
+    }
+    .container.is-transparent {
+      bottom: 0 !important;
+      opacity: 1;
+      .box {
+        background: none;
+        box-shadow: none;
+      }
     }
   }
 
diff --git a/templates/shortcodes/hero_section.html b/templates/shortcodes/hero_section.html
index e1543fd70b88195d1e57539fcfae963ba2ac6efa..e2d61c529abc40edd1dfe40e08f98e75307d9c8c 100644
--- a/templates/shortcodes/hero_section.html
+++ b/templates/shortcodes/hero_section.html
@@ -1,10 +1,10 @@
 <section class="hero is-fullheight-with-navbar {% if background_img %}has-background{% endif %}">
   {% if background_img %}
     {% set image = resize_image(path="@/" ~ page.colocated_path ~ "/" ~ background_img, width=800, height=600) -%}
-  <img class="hero-background" src="{{ image.url }}" alt="">
+  <img class="hero-background {% if background_transparent %}is-transparent{% endif %}" src="{{ image.url }}" alt="">
   {% endif -%}
   <div class="hero-body pl-0 pr-0">
-    <div class="container has-text-centered">
+    <div class="container has-text-centered  {% if background_transparent %}is-transparent{% endif %}">
       <div class="box is-radiusless">
         <h1 class="title is-1 mb-5">{{ title | default(value=page.title) | safe }}</h1>
         {% if body or page.description %}<p class="subtitle">{{ body | default(value=page.description) | safe }}</p>{% endif -%}