<div class="boxwrapper" style="visibility: hidden;"></div> </div> De tweede"> <div class="boxwrapper" style="visibility: hidden;"></div> </div> De tweede"> <div class="boxwrapper" style="visibility: hidden;"></div> </div> De tweede" />

Twee foto's op elkaar gepositioneerd. Laat een hover zien. Mogelijk met css of alleen javascript?

Wat ik wil doen is de bovenste foto laten zien (die is ingesteld op zichtbaarheid: verborgen) tijdens zweven. Ik heb twee foto's op deze manier op elkaar geplaatst:

<div class="frame">
Title Here 
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>

De tweede foto toegevoegd via css:

.boxwrapper {
 background: url("../img/boxPlus.gif"); 
 position: relative;
 width: 300px;
 height: 178px;
 left: -6px;
 top: -184px;
 z-index: 1000;
}

Is het mogelijk om met CSS te doen? Geprobeerd (en meerdere andere opties):

 #frame img:hover .boxwrapper {
      visibility: visible;
    }

Maar het werkt niet. Of is dit alleen mogelijk met javascript? Zo ja, geef enkele tips, want ik ben niet echt een javascript-man. Bedankt!

 1
toegevoegd
Bekeken: 36
de bron

2 antwoord

U zou de: hover class op een bovenliggende container moeten plaatsen. CSS staat niet toe dat dergelijke dingen 'boven' de boom druppelen, alleen naar beneden.

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}
2
toegevoegd
de bron

You could set the photo as background of the boxwrapper

.boxwrapper{
  background: url("../img/boxPlus.gif");
}

.boxwrapper:hover{
  background: url("../img/portfolio/default1.jpg");
}

als dit niet mogelijk is, zou je het als achtergrond kunnen toevoegen via een stijlkenmerk in je html

<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
2
toegevoegd
de bron
bedankt. Geholpen.
toegevoegd de auteur user1016695, de bron