try this in quick css:
The thing is that you have to select the direct neigbour of an element with that ( + )

.start-image + .image-overlay {
    display: none !important;
}

maybe you give to the image a hover effect that not only the pointer hand indicates a link

.start-image:hover {
-webkit-filter: drop-shadow(2px 2px 3px #666);
filter: drop-shadow(2px 2px 3px #666)
}

this topic is unsolved till now.
the link even to a #hash link ( anchor to color-section f.e.) even if you are on the parent page works now (Enfold 4.4.1) on default.
But the click on the link of the active page does not close the burger menu.

and you realy like to have the footer sticky – and not the socket ?
the trouble with this would be to have on main a padding-bottom to see all of the main content and for all screenwidth.

wie denn auch , das ist ein Bild oder?
Du meinst das hier:

nimm beim Einsetzen einfach das unbeschnittene Image

no i’m working on it right now a lot – sorry
i give you a different page – maybe my webers-testseite is to full with custom code

did you read my posting carefully?
Give to the text-block to which this issue concerns a custom-class! in my case i set it to: hr-inlinetext

then the rules will work for all text-block elements from enfold with img inside and text floating around and that specific class:
see what happens

( da die Klasse fehlt musste ich jetzt ohne den Code einfügen): Movie
– wenn du das Bild auf der eingestellten Größe läßt, dann bekommst du bei Screens knapp über den 768px ein extrem schmale Textleiste neben dem Bild.

Also ich sehe das bei Pflanzbehälter nicht so wie in deinem Screenshot. Getestet an Mac OSX HighSierra : Firefox Developer, Chrome, Safari.
Leere mal sämtliche Browser Cache und falls du das Merging von Enfold nutzt – erneuere bitte auch diese Dateien.
______
So I don’t see it like in your screenshot with plant containers. Tested on Mac OSX HighSierra : Firefox Developer, Chrome, Safari.
Empty all browser caches and if you use Enfold’s merging – please update these files as well.

Nachdem ich dein Video gesehen habe ist klar: du willst das unbedingt so haben, weil du das Bild vom Text umflossen haben möchtest.
Denn die 100% Weite ist die des gesamten text-blocks und nicht des Textes neben dem Bild.

Das funktioniert wenn man dem Bild auch relative Weite zuordnet:
Siehe hier: https://webers-testseite.de/maskenzauber/

Wenn du interessiert bist poste ich wie es geht.

____________

After I have seen your video it is clear: you absolutely want it to be like this, because you want the text to flow around the image.
Because the 100% width is that of the entire text block and not the width of the text itself.

This works if you also assign relative width to the image:
See here <a: https://webers-testseite.de/maskenzauber/

If you’re interested, I’ll post how it goes.

Translated with http://www.DeepL.com/Translator

on the copyright input field insert at the end [nolink]
it has to be square brackets !

Grüße aus Bonn nach Euskirchen!

Wenn ich für die mobile Version sachen verändern möchte nehme ich mir die Developer Tools die es in den Browsern so gibt.
Der Firefox zB hat “Bildschirm Größen Testen” oder alt cmd M – da kann man dann ein Handy auswählen, muss dann jedoch einmal den Inhalt refreshen. Dann kann man mittels “Element untersuchen” die Eigenschaften für das jeweilige Devise sehen.

Man sieht dann zB was Enfold alles für Klassen an html anfügt für das jeweilige Device (hier mal iphone) bzw sogar Browserverwendung zB:
html avia_mobile avia-safari avia-safari-602
habe die anderen Klassen weggelassen die mit dem Device nichts zu tun haben.
Eine Klasse setzt Enfold immer bei Verwenugng von Mobilen Endgeräten: avia_mobile

sodass man im Prinzip garnicht über das media-Query der Weite gehen muss – sondern mittels der html klasse ganz vorne gezielt Änderungen an Mobilen Endgeräten setzen kann . z.B:

.avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

das heißt hier wird wirklich nur für mobile Endgeräte die Schriftfarbe geändert, nicht wenn Du das Browserfenster schmal ziehst.

___________ english Version: ________

Greetings from Bonn to Euskirchen!

If I want to change things for the mobile version I use the developer tools which are available in the browsers.
The Firefox e.g. has “screen size test” or alt cmd M – there you can select a mobile phone, but you have to refresh the content once. Then you can use “Examine element” to see the properties for the respective foreign currency.

You can see for example what Enfold adds to html for each device (here iphone) or even for browser use:
html avia_mobile avia-safari avia-safari-602
have omitted the other classes that have nothing to do with the device.
One class always sets Enfold when using mobile devices: avia_mobile

so that in principle you don’t have to go beyond the media query of the distance – but can use the html class right at the front to make targeted changes to mobile devices . e.g:

.avia_mobile  .avia_cookie_text {
  color:#000!important;
}

.avia_mobile .avia-cookie-consent {
  background-color: #ff892e !important;
}

this means that the font color is really only changed for mobile devices, not if you narrow the browser window.

i don’t know if these values correlates a bit with f.e. photoshop jpeg Quality.
If so it might be in the most cases a good value of 35% – 45%
i hope that the original uploaded image is untouched.
You see here a post of mine to the same issue. https://kriesi.at/support/topic/a-better-image-resize-algorithm/

or – because on mobile devices – Enfold adds a class to html ( avia_mobile ) you can do it without checking the width:
(avia-compat.js line 11)

.avia_mobile .avia-image-overlay-wrap a.avia_image .image-overlay {
    display: none !important;
}

if you merge css and js or have other caching plugins – refresh all caches etc.