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

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

K

Krobbus

Mitglied
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:[email protected]"><font size="2">[email protected]</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:[email protected]">[email protected]</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:[email protected]"><font size="2">[email protected]</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:[email protected]"><font size="2">[email protected]</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:
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;
  }
}
 
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.
 
Bitte einmal die Seite aktualisieren und ggf den Browser-Cache leeren.. wenn ich die Seite aufrufe, sieht es ok aus... ohne Telefonnummer und Adresse.
 
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...
 
... 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.
 
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.
 
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?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben