Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS DIV Container bei Mouseover mit anderem Container und Opacity austauschen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS DIV Container bei Mouseover mit anderem Container und Opacity austauschen

    Hi,

    ich will ein Mouseover-Effekt wie z.b. bei Haribo auf der Hauptseite bei den mittleren DIV-Containern erreichen. Bei Mouseover legt sich ein neuer DIV-Container über den alten, der aber nicht weg ist, sondern nur mit Opacity abgeschwächt wird.

    Momentan habe ich in der CSS stehen:

    Code:
        .mask:hover
        {
    
            z-index: 1;
            opacity:1;
    
        }
        .mask
        {
            position: absolute;
            top:30px;
            left:30px;
            font-family:Oswald;
            font-size:50px;
            color:#000;
            -moz-transition: all 0.5s ease 0s;
            -webkit-transition: all 0.5s ease 0s;
            transition: all 0.5s ease 0s;
            opacity: 0;
            z-index: 2;
    
        }
        .box
        {
            position: relative;
    
    
        }
        .box:hover
        {
        filter: grayscale(100%); /* Standard */
        -webkit-filter: grayscale(100%); /* Webkit */
        filter: url(/elements/grayscale.svg#mask); /* Firefox 4-34 */
        filter: gray;  /* IE6-9 */
        -webkit-filter: grayscale(1); /* Old WebKit */
        opacity:0.5;
        transition:1s;
    
        }
        .box:hover .mask
        {
            opacity: 1;
        }​
    Und in der HTML-Datei:

    HTML-Code:
            <div class="box"><a href="salate.php">
                <p class="hover"> <img src="img/spargel.jpg" alt="slide2"/></p>
                <div class="mask">Salate immer frisch und frech!</div></a>
        </div>
    Das funktioniert soweit, aber leider wird auch der überlagernde DIV-Container (mask) in grau dargestellt und durch opacity abgeschwächt.

    Es soll aber nur der Container box abgeschwächt werden.

    Wo liegt denn nun da der Fehler?


  • #2
    Nimm rgba anstatt opacity.

    Kommentar


    • #3
      @blueheaven

      Du solltest Dich etwas mit dem Thema CSS und Vererbung beschäftigen...

      Eine Anmerkung sei gestattet:

      Dir gefällt ein Effekt auf einer Website. Warum schaust Du Dir nicht einfach den Quelltext an ????
      Die Haribo Seite ist im Quelltext absolut übersichtlich. Das CSS noch durch einen 'Beautifier' jagen und schon liegt alles sauber vor Dir.

      Ich weiß auch nicht, ob man Deine Anliegen hier im Forum noch ernst nehmen sollte. Anfänglich stellst Du Dich als Mathematiker vor, dann willst Du das ganze Web durchsuchen..., dann willst Du ein Bewertungssystem für Portale erstellen, willst in Zukunft einige Portale erstellen usw. Ich erkenne aber gleichzeitig, dass Dir erhebliches Grundwissen fehlt. Stell Dir doch anfänglich selber kleinere Aufgaben, entwickle ein Spiel z.B. Space Invaders oder Pong, dann mal ein kleines Spreadsheet, eine Adressverwaltung oder was auch immer. Bringe diese kleinen Projekte zum Abschluss und gehe dann an etwas größere Aufgaben. Anders werden es die Profis hier auch nicht gemacht haben. Sollte Dir das zu lange dauern solltest Du Dir die besten Leute suchen (und natürlich bezahlen) die Deine guten? Ideen verwirklichen.

      Kommentar


      • #4
        Zitat von kaminbausatz Beitrag anzeigen
        @blueheaven

        Du solltest Dich etwas mit dem Thema CSS und Vererbung beschäftigen...

        Eine Anmerkung sei gestattet:

        Dir gefällt ein Effekt auf einer Website. Warum schaust Du Dir nicht einfach den Quelltext an ????
        Die Haribo Seite ist im Quelltext absolut übersichtlich. Das CSS noch durch einen 'Beautifier' jagen und schon liegt alles sauber vor Dir.

        Ich weiß auch nicht, ob man Deine Anliegen hier im Forum noch ernst nehmen sollte. Anfänglich stellst Du Dich als Mathematiker vor, dann willst Du das ganze Web durchsuchen..., dann willst Du ein Bewertungssystem für Portale erstellen, willst in Zukunft einige Portale erstellen usw. Ich erkenne aber gleichzeitig, dass Dir erhebliches Grundwissen fehlt. Stell Dir doch anfänglich selber kleinere Aufgaben, entwickle ein Spiel z.B. Space Invaders oder Pong, dann mal ein kleines Spreadsheet, eine Adressverwaltung oder was auch immer. Bringe diese kleinen Projekte zum Abschluss und gehe dann an etwas größere Aufgaben. Anders werden es die Profis hier auch nicht gemacht haben. Sollte Dir das zu lange dauern solltest Du Dir die besten Leute suchen (und natürlich bezahlen) die Deine guten? Ideen verwirklichen.

        Was hat Mathematik mit CSS zu tun? Und Mathematik ist auch nur ein kleiner Part des mächtigen PHP. Ich hab als Mathematiker in Rechenaufgaben via PHP vielleicht schneller die Lösung, als andere, aber dennoch hat das ja nichts mit der Gesamtheit zu tun.

        Ja klar habe ich manchmal "seltsame" Fragen. Aber wer nicht fragt, wird nichts erfahren.

        Ich baue derzeit zwei Portale und eine Web-Visitenkarte auf. Die Portale nenne ich immer Großprojekte, nicht wegen der paar hundert PHP-Dateien, sondern wegen der immenens Datenmenge, die die Portale verarbeiten müssen.

        Und hey ich programmierte schon auf dem C64 Assembler... und C+ auf eine dir sicher unbekannten Mini-Handmaschine(Sharp). Ich habe mit HTML und Framework angefangen. Aber es kommen ja immer mehr Befehle dazu und ich habe halt nicht die Zeit stundenlang vor dem PC zu hocken und alles zu lernen. Dafür gibts doch Foren wie diese, wenn man nicht der Crack ist, wie ihr....

        Kommentar


        • #5
          Zitat von blueavenue Beitrag anzeigen
          Und hey ich programmierte schon auf dem C64 Assembler... und C+ auf eine dir sicher unbekannten Mini-Handmaschine(Sharp).
          Assembler - können wir älteren alle.

          Ich hatte z.B. mal so einen Sharp PC 1210 das war vor ca. 37 Jahren - habe auch schon einige Programmiersprachen durch - Assembler, Basic, Pascal, C, C++, C#, Java, Perl usw. An C+ kann ich mich nicht erinnern. Gib mir bitte mal einen Link hierzu.

          Kommentar


          • #6
            C++ meinte ich. Ist mir ein +-Zeichen unter die Räder gekommen. Du nimmst aber alles ganz genau. Bügelst du auch deine Socken? Und übrigens CSS ist ja kaskadierend. Das heißt es geht von Oben nach Unten. Also kann immer nur das darunterliegende DIV ein Child sein. Soviel zu den Grundlagen...

            Mir ist dennoch ein Fehler entstanden. Ich meinte C und nicht C++ mit dem Sharp Pocketrechner.

            Kommentar


            • #7
              Zitat von blueavenue Beitrag anzeigen
              Du nimmst aber alles ganz genau. Bügelst du auch deine Socken? Und übrigens CSS ist ja kaskadierend. Das heißt es geht von Oben nach Unten. Also kann immer nur das darunterliegende DIV ein Child sein. Soviel zu den Grundlagen...

              Mir ist dennoch ein Fehler entstanden. Ich meinte C und nicht C++ mit dem Sharp Pocketrechner.
              Ich bügele meine Socken natürlich nicht. Ich muss Socken auch nicht debuggen....

              CSS Kaskade und Vererbung sind zwei verschiedene Socken

              Kommentar


              • #8
                Ich werde mal mein Problem mit RGBA und HSLA versuchen zu lösen oder dazu noch die Vererbung innerhalb der DIV's lernen.





                Kommentar

                Lädt...
                X