I have that code below, It’s seems to works but, space when transition works is difrent in archOver and postOver. Height, widht, positions are the same, but when I hover at arch it works fine because transition “move” only then. But transition in post “move” when I hover at post. I think that souldn’t works that way, in my opinion transistion should “move” only when I hove at postOver. What do you think?
CSS:
body{
font-family:"Segoe UI";
font-size:16px;
color:white;
background-color:white;
padding:0px;
margin:0px;
}
div#sidebar {
position:fixed; left:0px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:224px;
height:100%;
}
#logo {
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/logo_thu.png);
background-repeat:no-repeat;
background-position:center;
box-shadow:0px 0px 3px #000000;
}
#archOver{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
-webkit-transition:width 1s;
}
*:hover > #archOver{
width: 0;
}
#archText{
position:relative; top:-222px;
font-size:12px;
width:222px;
height:222px;
box-shadow:0px 0px 3px #000000;
color:black;
text-align:center;
z-index:-1;
}
div#footer{
margin:0 1% 0 1%;
position:fixed; bottom:1%;
width:98%;
font-size:10px;
text-align:center;
background-color:#000000;
box-shadow:0px 0px 3px #000000;
}
a:link, a:hover, a:visited {
text-decoration:none;
color:inherit;
}
--------------SAME AS SIDEBAR---------------
div#post {
position:fixed; right:0px;
margin-left:1%;
padding-left:3px;
padding-right:3px;
width:224px;
height:100%;
}
#logo2 {
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/logo_thu.png);
background-repeat:no-repeat;
background-position:center;
box-shadow:0px 0px 3px #000000;
}
#postOver{
margin-top:5%;
width:222px;
height:222px;
background-image:url(img/arch.jpg);
box-shadow:0px 0px 3px #000000;
-webkit-transition:width 1s;
}
*:hover > #postOver{
width: 0;
}
#postText{
position:relative; top:-222px;
font-size:12px;
width:222px;
height:222px;
box-shadow:0px 0px 3px #000000;
color:black;
text-align:center;
z-index:-1;
}
HTML:
<body>
<div id="sidebar">
<div id="logo"></div>
<a href="index.html">
<div id="archOver"></div></a>
<div id="archText"></div>
</div>
<div id="post">
<div id="logo2"></div>
<div id="postOver"></div>
<div id="postText">text</div>
</div>
<div id="footer">
</div>
</body>
I’ve solved it!
The
<a href> .. </a>was restricting hover area.