[ERLEDIGT] Mouseover-Effect soll in der Mobilen Version nicht standartmäßig angezeigt werden

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

Krobbus

Mitglied
4 April 2008
104
0
16
Ich habe ein responsives Websitetemplate gekauft, und bin soweit auch sehr gut mit den Anpassungen klargekommen. Nur das folgende Problem kriege ich nicht gelöst.

Auf der Seite werden verschiedene Anwälte vorgestellt. Links ist die Ansicht, die man im Browser eines PCs/Laptops standartmäßig sieht, rechts ist der Mausover Effekt.

Soweit, so gut. Auf der mobilen Version (also wenn ich mit Smartphone auf der Seite bin) sieht es aber immer wie auf dem rechten Bild. Ich möchte aber, das es dort immer so aussieht wie auf dem linken Bild (also das man dort die Telefonnummer und Email Adresse gar nicht sehen kann)



Hier ist der Code:


Code:
      <section class="section-60 section-lg-100">
        <div class="container">
          <div class="row row-40 align-items-sm-end">
            <div class="col-sm-6 col-md-4 col-lg-3">
              <div class="thumbnail-variant-2-wrap">
                <div class="thumbnail thumbnail-variant-2">
                  <figure class="thumbnail-image"><img src="images/anwaelte_juergen_klein.jpg" alt="" width="246" height="300"/>
                  </figure>
                  <div class="thumbnail-inner">
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary material-icons-local_phone"></span><a class="link-white" href="tel:+4952029963223">(05202) 996 3223</a></div>
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary fa-envelope-o"></span><a class="link-white" href="mailto:kanzlei@rechtsanwaelte-jelen.de"><font size="2">kanzlei@rechtsanwaelte-jelen.de</font></a></div>
                  </div>
                  <div class="thumbnail-caption">
                    <p class="text-header"><a href="anwaelte-juergen.html">Jürgen Jelen</a></p>
                    <div class="divider divider-md bg-teak"></div>
                    <p class="text-caption">Rechtsanwalt <br> Fachanwalt für Steuerrecht</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
              <div class="thumbnail-variant-2-wrap">
                <div class="thumbnail thumbnail-variant-2">
                  <figure class="thumbnail-image"><img src="images/anwaelte_ute_klein.jpg" alt="" width="246" height="300"/>
                  </figure>
                  <div class="thumbnail-inner">
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary material-icons-local_phone"></span><a class="link-white" href="tel:+4952029963223">(05202) 996 3223</a></div>
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary fa-envelope-o"></span><a class="link-white" href="mailto:kanzlei@notarin-jelen.de">kanzlei@notarin-jelen.de</a></div>
                  </div>
                  <div class="thumbnail-caption">
                    <p class="text-header"><a href="anwaelte-ute.html">Ute Jelen</a></p>
                    <div class="divider divider-md bg-teak"></div>
                    <p class="text-caption">Notarin<br>Rechtsanwältin</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
              <div class="thumbnail-variant-2-wrap">
                <div class="thumbnail thumbnail-variant-2">
                  <figure class="thumbnail-image"><img src="images/anwaelte_saskia_klein.jpg" alt="" width="246" height="300"/>
                  </figure>
                  <div class="thumbnail-inner">
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary material-icons-local_phone"></span><a class="link-white" href="tel:+4952029963223">(05202) 996 3223</a></div>
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary fa-envelope-o"></span><a class="link-white" href="mailto:kanzlei@rechtsanwaelte-jelen.de"><font size="2">kanzlei@rechtsanwaelte-jelen.de</font></a></div>
                  </div>
                  <div class="thumbnail-caption">
                    <p class="text-header"><a href="anwaelte-saskia.html">Saskia Jelen</a></p>
                    <div class="divider divider-md bg-teak"></div>
                    <p class="text-caption">Rechtsanwältin</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
              <div class="thumbnail-variant-2-wrap">
                <div class="thumbnail thumbnail-variant-2">
                  <figure class="thumbnail-image"><img src="images/anwaelte_viola_klein.jpg" alt="" width="246" height="300"/>
                  </figure>
                  <div class="thumbnail-inner">
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary material-icons-local_phone"></span><a class="link-white" href="tel:+4952029963223">(05202) 996 3223</a></div>
                    <div class="link-group"><span class="novi-icon icon icon-xxs icon-primary fa-envelope-o"></span><a class="link-white" href="mailto:kanzlei@rechtsanwaelte-jelen.de"><font size="2">kanzlei@rechtsanwaelte-jelen.de</font></a></div>
                  </div>
                  <div class="thumbnail-caption">
                    <p class="text-header"><a href="anwaelte-viola.html">Viola Peters-Jelen</a></p>
                    <div class="divider divider-md bg-teak"></div>
                    <p class="text-caption">Rechtsanwältin</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>
Ihr könnt euch die Seite auch gerne live angucken, dann ist das wahrscheinlich mit dem CSS leichter: [Problem gelöst, link entfernt] . (Scrollt einfach auf der Startseite etwas nach unten)
 
Zuletzt bearbeitet:

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
Folgende Ergänzung im CSS könnte helfen...
CSS:
.desktop .thumbnail-variant-2 .thumbnail-inner {
    opacity: 0;
    visibility: hidden;
    transition: .33s all ease-out;
}
@media screen and (max-width: 991px) {
.thumbnail-variant-2::before {
  background-color: transparent;
  }
}
 

Krobbus

Mitglied
4 April 2008
104
0
16
Vielen Dank erstmal. Ich habe deinen Code ins CSS kopiert. Damit verschwindet dieser blaue Filter, doch die Telefonnummer und Email Adresse ist trotzdem noch da.
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
Bitte einmal die Seite aktualisieren und ggf den Browser-Cache leeren.. wenn ich die Seite aufrufe, sieht es ok aus... ohne Telefonnummer und Adresse.
 

Krobbus

Mitglied
4 April 2008
104
0
16
Hast du es auch mit einem Smartphone getestet? Dort klappt es bei mir mit 2 verschiedenen Browsern (auch nach Löschen des Caches) nicht.

Das Verrückte ist: Wenn ich auf meinem Desktop-PC die Browserbreite stark verringere (um ein Smartphone zu simulieren), funktioniert es.

Vielleicht gibt es im CSS irgendeinen Code, der zu deinem im Widerspruch steht und nur bei wirklichen Smartphones zu Problemen führt? Ich bin ratlos...
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
... uupps... sorry, habe das gerade nochmal mit dem Handy geprüft! Stimmt... da ist der Text noch zu sehen. Leider kann ich auf die Schnelle keinen CSS-Formatierung finden, der den Unterschied zwischen Desktop und Handy verursachen kann. ... 'opacity: 0' sollte eigentlich von jedem Gerät umgesetzt werden
Habe auch keine Simulationsmöglichkeit, um das Handyverhalten zu testen - aber vielleicht finde ich ja noch was.
 

Sailor

Aktives Mitglied
14 Juli 2017
394
46
28
Teste doch bitte mal, ob es einen Unterschied macht, wenn beide CSS Styles in der MediaQuery sind...
CSS:
@media screen and (max-width: 991px) {
  .thumbnail-variant-2::before {
     background-color: transparent;
  }
  .desktop .thumbnail-variant-2 .thumbnail-inner {
    opacity: 0;
    visibility: hidden;
    transition: .33s all ease-out;
  }
}
und wenn das auch nicht wirkt auch noch alternativ...
CSS:
@media screen and (max-width: 991px) {
  .thumbnail-variant-2::before {
     background-color: transparent;
  }
  .desktop .thumbnail-variant-2 .thumbnail-inner {
    display: none;
  }
}
Wie gesagt, ich kann das auch nur auf dem Desktop testen und da funktionieren alle drei Varianten.
 

m.scatello

Aktives Mitglied
15 Februar 2017
924
96
28
Versuche mal
. link-group { display:none; }

Können sich Rechtsanwälte eigenlich keine professionellen Webdesigner leisten, die nicht auf kostenlose Hilfe aus Foren angewiesen sind?
 
Werbung: