Reputation: 13
I am trying to bring in a overlay that comes on the top of a image when you hover with your mouse. Currently I have it coming just from the top, and eases down to the bottom. What I am trying to achieve though, is have the overlay split into 2 sections, coming from the top left and bottom right and join in the middle. I know this is hard to understand with just text, so I created an image.
I have seen this done before, but am not sure what it is called, or how to achieve the effect. Help would be appreciated
Upvotes: 1
Views: 1410
Reputation: 2619
Here's my stab at it: http://jsfiddle.net/
The basic idea is that you're just doing this, but with the wrapper element rotated. This solution would obviously need to checked for compatibility.
This could be achieved without a .slide
element, but would require more manual positioning of the elements.
Upvotes: 2
Reputation: 7092
Here is a basic example using jquery.
Note, the cool kids would do this with css3.
http://jsbin.com/eyilog/1/edit
In this example the divs are absolutely positioned outside the containing element. overflow:hidden; makes sure they are invisible. On hover jquery animates their positions back inside the div, overlaying the content of the div.
To make it diagonal just use transparent images.
$(".text").hover(function() {
$(".topleft").animate({top: "+0px"}, 500);
$(".bottomright").animate({bottom: "+0px"}, 500);
});
<div class="text">
<div class="topleft"></div>
text
<div class="bottomright"></div>
</div>
.text {
background-color:red;
width:100px;
height:100px;
margin:auto;
overflow:hidden;
position:relative;
}
div div {
background-color:black;
height:50px;
width:100px;
position:absolute;
}
.topleft {
top:-50px;
}
.bottomright {
bottom:-50px;
}
Upvotes: 0