Дзве фатаграфіі, размешчаныя адзін ад аднаго. Паказаць адзін на лунанні. Магчыма з дапамогай CSS або толькі JavaScript?

Тое, што я хачу зрабіць, гэта паказаць верхнюю фатаграфію (які ўсталяваны для бачнасці: прыхаваная) на лунанні. У мяне ёсць дзве фатаграфіі, размешчаныя адзін ад аднаго, як гэта:

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

Дададзены другі здымак праз CSS:

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

Ці можна зрабіць з дапамогай CSS? Спрабаваў (і яшчэ некалькі варыянтаў):

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

Але гэта не працуе. Ці гэта магчыма толькі з JavaScript? Калі так, то калі ласка, дайце некалькі саветаў, як я не занадта шмат яваскрипта хлопца. Дзякуй!

1

2 адказы

Вы павінны былі б паставіць: клас лунання на бацькоўскім кантэйнеры. CSS не дазваляе такія рэчы прасочвацца «да» дрэва, толькі ўніз.

.boxwrapper {
    display: none;
}

.frame:hover .boxwrapper {
    display: block;
}
2
дададзена

You could set the photo as background of the boxwrapper

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

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

калі гэта не магчыма, вы можаце дадаць яго ў якасці фону карыта атрыбуту стылю ўнутры вашага HTML

<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div> 
2
дададзена
дзякуй. Дапамагаў.
дададзена аўтар user1016695, крыніца