Trying to create a new web design, I have implemented two divs with 50% width each that slide over on hover. However, I am facing an issue where I want the right 'logo' div to hide when hovering on the left 'slide' div and vice versa, but it's not working as expected. Can anyone offer some insight into what might be missing in my code? Any help would be highly appreciated!
body {
background:black;
}
.slide {
position:absolute;
top:0;
bottom:0;
width:50%;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-ms-transform:skew(-15deg);
-o-transform:skew(-15deg);
transform:skew(-15deg);
z-index:2;
}
.slide:hover {
width:60%;
z-index:80;
}
.slide#left {
left:0;
}
.slide#right {
right:0;
}
.wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
z-index:2;
}
.inner {
width:100%;
height:100%;
-webkit-transform:skew(15deg) scale(1.5);
-moz-transform:skew(15deg) scale(1.5);
-ms-transform:skew(15deg) scale(1.5);
-0-transform:skew(15deg) scale(1.5);
transform:skew(15deg) scale(1.5);
opacity:0.6;
position:absolute;
}
.slide:hover .inner {
opacity:0.9;
}
.inner#left {
background:url(//savado.nl/new/key.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.inner#right {
background:url(//savado.nl/new/code2.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.inner#left:hover .logo#right {
display:none;
}
.inner#right:hover .logo#left {
display:none;
}
.slide .logo {
position:absolute;
z-index:99;
top:50%;
height:30%;
}
.logo img {
height:100%;
}
.logo#left {
right:0;
-webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(50%) translateY(-50%) skew(15deg);
-o-transform:translateX(50%) translateY(-50%) skew(15deg);
transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
left:0;
-webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
-o-transform:translateX(-50%) translateY(-50%) skew(15deg);
transform:translateX(-50%) translateY(-50%) skew(15deg);
}
div {
-webkit-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
-moz-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
-ms-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
-o-transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
transition:opacity 0.6s ease, width 0.6s ease, z-index 0.6s ease;
} <div class='slide' id='right'>
<div class='wrap'>
<div class='inner' id='right'></div>
</div>
<div class='logo' id='right'>
<img src='//savado.nl/new/logo.png' />
</div>
</div>
<div class='slide' id='left'>
<div class='wrap'>
<div class='inner' id='left'></div>
</div>
<div class='logo' id='left'>
<img src='//savado.nl/new/logo.png' />
</div>
</div>And here is the [JSFIDDLE][1]!
Thank you for your assistance!
[1]: http://jsfiddle.net/NZXeT/