Overlay macht Probleme

[Aqua75]

Hallo,

wenn man ein Bild in einer Galerie mit einem Overlay versieht (wenn man mit dem Mauszeiger das Bild berührt wird es etwas heller) entsteht das Problem, dass bei Smartphoneanzeigen und auf kleinen Bildschirmen, dass Overlay automatisch angeschaltet wird, ohne dass man mit dem Mauszeiger draufgeht. Dadurch werden die Bildgrafiken nicht so schön angezeigt, weil immer das Overlay aktiviert ist.
Kann man das irgendwie besser einstellen, sodass das Overlay nur aktiviert wird, wenn das Bild auch berührt wird?

[Tommy Herrmann]

Hallo,

keine Ahnung was Du meinst - da müsstest Du mal ein Beispiel zeigen (URL)

[Aqua75]

Hier eine Testseite zur Ansicht:

https://www.zeomed.de/

Wie Du sehen kannst, werden die Bilder durch das Overlay heller, wenn man mit dem Mauszeiger auf das Bild kommt.

Leider sind die Bilder aber auch automatisch hell, wenn man das Browserfenster verkleinert und wenn man sie sich auf dem Smartphone ansieht.

Wie kann man das Problem lösen, sodass der Overlay erst aktiviert wird, wenn man das Bild berührt?

[Tommy Herrmann]

Was für ein Thema und welcher Block ist das genau?

Es könnte an dieser Class liegen:

Code: Alles auswählen

@media (max-width: 767px) {
  .item-wrapper:before {
    opacity: 0.6;
  }
}

... ich müsste ich das hier erst einmal nachbauen, sonst ist das so theoretisch immere nicht so einfach.

[Tommy Herrmann]

Ich habe mir das gerade nochmal angeguckt.

Du verwendest im Projekt das Standard-Thema "Mobirise5" und der Bilder-Block ist aus dem Thema "ArtistM5".

Diese Media-Anweisung muss da ganz raus - lösche das - da war der Programmierer besoffen

Lösche diese Media-Anweisung aus der class="item-wrapper":

Code: Alles auswählen

    @media (max-width: 767px) {
        opacity: 0.6;
    }

Lösche die im Screenshot markierte Media-Anweisung:

[Aqua75]

Hat super funktioniert.

Allerdings ist es so, dass bei der Mobilansicht die Beschriftung zu sehen ist, die aber erst zu sehen sein sollte, wenn das Overlay aktiviert wird:

Bei den anderen Bildschirmgrößen ist dies nicht der Fall.

[Tommy Herrmann]

Moin,

ja - das ist so gewollt und erdacht worden bei diesem Block.

Am Handy hast Du keine Maus mit der bei Mausüber erst die Schrift sichtbar wird, also wird diese gleich angezeigt.

Schließlich kannst Du dort 3 Schriften auf jedem Bild - Titel, Untertitel und Text - eintragen und dabei könnte es sich ja um entscheidend wichtige Informationen handeln. 90% der Besucher einer Webseite kommen heutzutage mit dem Handy und auch die sollen diese Informationen schließlich lesen können.

Die rechnen aber nicht damit, dass sie zunächst mit dem Finger auf jedes Bild tippen müssen, um diese Informationen auch lesen zu können.

Falls Du das dennoch ändern wolltest - obwohl so vollkommen richtig, wie es gerade gemacht ist - geht das auch wieder im "CSS Editor" in der class="item-content" in dieser Media-Anweisung:

In Zeile 26 steht:

opacity: 1;

Code: Alles auswählen

@media (max-width: 767px) {
    transform: translate(-50%, -50%);
    opacity: 1;
}

... ändere das in:

opacity: 0;

Code: Alles auswählen

@media (max-width: 767px) {
    transform: translate(-50%, -50%);
    opacity: 0;
}

... warum wählst Du einen Block, bei dem Dir so vieles nicht gefällt? Suche Dir doch einfach einen für Dich passenden Block unter den Hunderten, die es gibt und versuche nicht diesen Block komplett neu zu gestalten.