Overlay macht Probleme
Overlay macht Probleme
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?
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Overlay macht Probleme
Hallo,
keine Ahnung was Du meinst - da müsstest Du mal ein Beispiel zeigen (URL)
keine Ahnung was Du meinst - da müsstest Du mal ein Beispiel zeigen (URL)
Re: Overlay macht Probleme
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?
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Overlay macht Probleme
Was für ein Thema und welcher Block ist das genau?
Es könnte an dieser Class liegen:
... ich müsste ich das hier erst einmal nachbauen, sonst ist das so theoretisch immere nicht so einfach.
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Overlay macht Probleme
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":
Lösche die im Screenshot markierte Media-Anweisung:
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:
Re: Overlay macht Probleme
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.
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
- Site Admin
- Beiträge: 5921
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Overlay macht Probleme
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;
... ändere das in:
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.
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;
}
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.
Wer ist online?
Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste