CODEWITHSUNDEEP
javascriptjquerycssoverlaymask
David Jensen
David Jensen

Reputation: 13

CSS overlay coming from corners

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.

enter image description here

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

Answers (2)

Jeremy Blalock
Jeremy Blalock

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

user1721135
user1721135

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

Related Questions