Anzeige Titel ohne hover über das Bild Accordion Gallery in WordPress

Dies ist meine website.

https://developer.blink-eye.com/prifer/index.php/en/index/

Wenn Sie einen Bildlauf nach unten zum Abschnitt "ALLES, WAS WIR SIND" finden Sie eine Galerie.

Mein problem ist, dass ich Sie mit Bild, Accordion-Plugins auf meiner website. Standardmäßig zeigt es die Titel-und Entschlüsselung, sondern auf den Mauszeiger über die einzelnen vertikalen Abschnitt. Ich will es zeige nur Titel ohne schweben, während Titel & Beschreibung bewegen Sie den Mauszeiger über wie zeigt Sie jetzt.

Ich habe versucht, dies zu erreichen, verwenden externe css auf verschiedene Klassen, aber die Titel nicht angezeigt werden. Irgendwann, wenn Sie erscheinen, sind Sie nicht ausgerichtet.

Was ich denke ist, das ist etwas, was wir tun können, mit JavaScript, aber ich' m nicht Experte einen code schreiben, mehr als ich jetzt müde.

Suche nach Hilfe von Experten jetzt.

Vielen Dank im Voraus.

JS

var ImageAccordion = function($scope, $) {
    var $imageAccordion = $scope.find(".eael-img-accordion").eq(0),
        $id =
            $imageAccordion.data("img-accordion-id") !== undefined
                ? $imageAccordion.data("img-accordion-id")
                : "",
        $type =
            $imageAccordion.data("img-accordion-type") !== undefined
                ? $imageAccordion.data("img-accordion-type")
                : "";

    if ("on-click" === $type) {
        $("#eael-img-accordion-" + $id + " a").on("click", function(e) {
            if ($(this).hasClass("overlay-active") == false) {
                e.preventDefault();
            }

            $("#eael-img-accordion-" + $id + " a").css("flex", "1");
            $(this)
                .find(".overlay")
                .parent("a")
                .addClass("overlay-active");
            $("#eael-img-accordion-" + $id + " a")
                .find(".overlay-inner")
                .removeClass("overlay-inner-show");
            $(this)
                .find(".overlay-inner")
                .addClass("overlay-inner-show");
            $(this).css("flex", "3");
        });
        $("#eael-img-accordion-" + $id + " a").on("blur", function(e) {
            $("#eael-img-accordion-" + $id + " a").css("flex", "1");
            $("#eael-img-accordion-" + $id + " a")
                .find(".overlay-inner")
                .removeClass("overlay-inner-show");
            $(this)
                .find(".overlay")
                .parent("a")
                .removeClass("overlay-active");
        });
    }
};
jQuery(window).on("elementor/frontend/init", function() {
    elementorFrontend.hooks.addAction(
        "frontend/element_ready/eael-image-accordion.default",
        ImageAccordion
    );
});

CSS

/*------------------------------*/
/* 34. Image accordion
/*------------------------------*/
.eael-img-accordion {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 50vh;
}

.eael-img-accordion a {
  position: relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  text-decoration: none;
  color: #fff;
  -webkit-background-size: cover;
          background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-transition: -webkit-box-flex .4s, -webkit-flex .4s;
  transition: -webkit-box-flex .4s, -webkit-flex .4s;
  -o-transition: flex .4s;
  transition: flex .4s;
  transition: flex .4s, -webkit-box-flex .4s, -webkit-flex .4s, -ms-flex .4s;
}

.eael-grow-accordion {
  -webkit-box-flex: 3;
  -webkit-flex: 3;
      -ms-flex: 3;
          flex: 3;
}

.eael-img-accordion .overlay {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 10px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: background-color .4s;
  -o-transition: background-color .4s;
  transition: background-color .4s;
}

.eael-img-accordion .overlay .overlay-inner {
  z-index: 1;
}

.eael-img-accordion a:after {
  content: "";
  position: absolute;
  width: 100%%;
  height: 100%%;
  z-index: 0;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.eael-img-accordion .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.eael-img-accordion .overlay h2 {
  color: #fff;
  -webkit-transform: translate3d(0, -60px, 0);
          transform: translate3d(0, -60px, 0);
}

.eael-img-accordion .overlay p {
  color: #fff;
  -webkit-transform: translate3d(0, 60px, 0);
          transform: translate3d(0, 60px, 0);
}

.eael-img-accordion .overlay-inner-show * {
  opacity: 1;
  visibility: visible;
  -webkit-transform: none !important;
      -ms-transform: none !important;
          transform: none !important;
  -webkit-transition: all .3s .3s;
  -o-transition: all .3s .3s;
  transition: all .3s .3s;
}

@media screen and (max-width: 800px) {
  .eael-img-accordion {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .eael-img-accordion a:hover {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }

  .eael-img-accordion a:hover .overlay {
    background-color: transparent;
  }
}
+1
2019-09-17 10:46:58
Quelle
0 Antworten

Sehen Sie sich andere Fragen zu Tags an