css3 - CSS Rotate 2 objects -
i've got strange problem..
've got 2 objects:
<div id="menu"> <a href="#"><img src="images/nagrody.png"></a> <a href="#"><img src="images/zwyciezcy.png"></a> <a href="#"><img src="images/zasady.png"></a> </div> with style:
#menu { float:right; margin:20px 10px; width: 160px; -webkit-transform:rotate(3deg); -moz-transform:rotate(3deg); -o-transform:rotate(3deg); } #menu img{ -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform:scale(0.95,0.95); -moz-transform:scale(0.95,0.95); -o-transform:scale(0.95,0.95); overflow:hidden; } #menu img:hover{ -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -o-transform:scale(1,1); } and second object:
<div id="znajomi"> <a href="#"><img src="images/zapros.png"></a> <p>brakuje ci jeszcze <span id="fr">3 znajomych</span></p> </div> with style:
#znajomi { padding:420px 20px; -webkit-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -o-transform:rotate(-4deg); } #znajomi p { font-family:din, arial, helvetica, sans-serif; font-size:13px; color:#fff; position:relative; top:-20px; left:20px; } #fr { font-family: arista, arial, helvetica, sans-serif; font-size:21px; color:#c2dc2f; text-shadow:rgba(113,0,0,0.75) 2px 2px; } and problem that: if delete #znajomi
-webkit-transform:rotate(-4deg); -moz-transform:rotate(-4deg); -o-transform:rotate(-4deg); hover menu work, if code plaste - doesn't work.
any suggestions?
the #znajomi-element overlays #menu. have use z-index or other positioning. without full site-layout cannot give example best change.
it helps, if remove float:right menu. might add margin-left same result before.
Comments
Post a Comment