javascript - コーナーからの CSS オーバーレイ

Question

マウスでホバーしたときに画像の上に来るオーバーレイを取り込もうとしています。現在、私はそれが上から来ており、下に向かって緩和しています。私が達成しようとしているのは、オーバーレイを左上と右下から来る 2 つのセクションに分割し、中央で結合することです。文字だけだとわかりにくいと思いますので、画像にしてみました。

以前にこれが行われたのを見たことがありますが、それが何と呼ばれているのか、または効果を達成する方法がわかりません. 助けていただければ幸いです

Answer 1

jquery を使用した基本的な例を次に示します。

クールな子供たちはcss3でこれを行うことに注意してください。

http://jsbin.com/eyilog/1/edit

この例では、div は絶対に含まれる要素の外側に配置されています。オーバーフロー:非表示; それらが見えないようにします。ホバーすると、jquery は位置を div 内にアニメーション化し、div のコンテンツをオーバーレイします。

対角線にするには、透明な画像を使用するだけです。

$(".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;
}