[Vraag] Show div on hover

[Verwijderd]

Zie deze pagina voor mijn probleem:
*snip* zo werkt het hier niet

Ga met je muis over de grootste nieuwsfoto (de linker foto dus). Er verschijnt nu een beschrijving van het artikel.

Scroll nu naar beneden (tot je de foto nog nét kan zien), en ga dan NOG een keer met je muis over die grootste nieuwsfoto. Het ziet er naar uit dat de rest van de pagina dan verschuift.

Wie kan mij helpen?

code:

            #nieuws-groot .caption { /* hele vakje tekst dat over de foto komt */
                background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
                background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
                background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
                width: -moz-calc(100% - 30px);
                width: -webkit-calc(100% - 30px);
                width: -o-calc(100% - 30px);
                width: calc(100% - 30px);
                left: 0;
                bottom: 0;
                color: #fff;
                font-family: 'Ubuntu', Arial, Helvetica, sans-serif;
                text-shadow: 3px 3px 15px #000;
                line-height: 130%;
                padding: 15px;
                position: absolute;
                cursor: pointer;
                z-index: 2;
            }
            
                #nieuws-groot .caption .nieuws-beschrijving { /* beschrijving die in beeld komt bij een HOVER (is nu 0px hoog dus onzichtbaar - pas zichtbaar bij hover) */
                    font-size: 14px;
                    font-family: 'Arimo', Arial, Helvetica, sans-serif;
                    line-height: 150%;
                    opacity: 0;
                    filter: alpha(opacity=0);
                    height: 0px;
                    
                    -webkit-transition: all 200ms ease-out;
                    -moz-transition: all 200ms ease-out;
                    -o-transition: all 200ms ease-out;
                    -ms-transition: all 200ms ease-out;
                    transition: all 200ms ease-out;
                }
                
            #nieuws-groot:hover .fade-caption { /* vakje verandert van kleur bij hover */
                background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.97) 100%);
                background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.97) 100%);
                background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.97) 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f7000000',GradientType=0 );
            }
            
            #nieuws-groot:hover .nieuws-beschrijving { /* beschrijving wordt zichtbaar bij hover */
                opacity: 1.0;
                filter: alpha(opacity=100);
                height: 68px;
            }

[ Voor 1% gewijzigd door RobIII op 18-12-2017 18:49 ]

[Room42]

Ik zie niet wat je bedoelt met dat de pagina verschuift. Ik zie wel dat ul met id="menu" over de content valt en dat je twee keer een div met id="main" en twee keer een id="wrap" hebt. Kortom, even je HTML valideren

[ Voor 16% gewijzigd door Room42 op 18-12-2017 17:13 ]

[Verwijderd]

Room42 schreef op maandag 18 december 2017 @ 17:12:
Ik zie niet wat je bedoelt met dat de pagina verschuift. Ik zie wel dat ul met id="menu" over de content valt en dat je twee keer een div met id="main" en twee keer een id="wrap" hebt. Kortom, even je HTML valideren

Ga ik naar kijken.

Maar, scroll naar beneden zodat de grote nieuwsfoto bovenin je browser bijna verdwenen is... dat je hem nog wel net ziet. En ga dan met je muis over de grote foto.

De andere divs verschuiven dan. Snap je?

[Room42]

Misschien even screenshots maken of een filmpje?
Maar fix eerst je HTML, dat zal mogelijk al veel oplossen.

[ Voor 40% gewijzigd door Room42 op 18-12-2017 17:32 ]

[Verwijderd]

Room42 schreef op maandag 18 december 2017 @ 17:31:
Misschien even screenshots maken of een filmpje?
Maar fix eerst je HTML, dat zal mogelijk al veel oplossen.

Komt eraan...

Is id’s vervangen door class al goed genoeg?

[Room42]

Vraag je dat aan mij? Het is toch jouw site/code?
Vermoede: Nee, dat kan niet, omdat de CSS overal naar het ID zoekt.

Als je een bestaand template gebruikt, moet je de ondersteuning bij de (documentatie van de) ontwikkelaar zoeken.

[RobIII]

Hoi vinzors,

We verwachten hier dat je een testcase maakt en die m.b.v. code tags hier in je topicstart post danwel een testcase op jsfiddle te maken. En een testcase houdt in: enkel-en-alleen relevante(!) code (html, css, js, whatever er nodig is om je probleem te reproduceren en niet meer).

Je topic is nu niets meer dan een Kan iemand even...? en zoals je in onze Quickstart zult lezen mist er nog e.e.a. in je topicstart wat we wél verwachten in een topicstart

Links naar sites (tenzij ze enkel-en-alleen relevante(!) code bevatten om een probleem te reproduceren en dus geen merknamen, logo's en what-have-you's) vallen onder spam; laat die dus ook acherwege a.u.b.

Open gerust een nieuw topic maar hou dan voorgenoemde tips, aanwijzingen en quickstart in je achterhoofd en dan komt 't vast goed