次の属性を持つWebページに2つの画像を並べて表示する方法を探しています。
1）なお、この
2のようになります）の両方が両方とも4
黒と白であるべきである）リンク（例。mysite1.html及びmysite2.html）
3でなければならない）のホバー1つでそれらはmysiteX.html
CSSと2つの画像でこのデザインを実現するには
私はいくつかのテンプレートが、このために、インターネット上でそこにあることをかなり確信しているが、私はどのように知っていないに行くクリックで）少し成長し、
5色になるはずですこのアニメーションに名前を付けて、それを見つけることができません。
編集
私はテンプレートを探しています。私はまだこれを試していないし、0から始めるのは嫌いです。使用できるテンプレートがあると確信しています。
まあ、私はそれは非常に簡単にCSSのclip-pathプロパティを使用すると思います。そのためには多角形が必要です。
は、ここでそれについての良い記事です：https://css-tricks.com/clipping-masking-css/
とここにあなたの問題を解決するためにそれを使用する方法の例です：http://jsbin.com/linelegini/1/edit?html,css,js,output
Ivanのおかげで、私は希望の出力を作成することができました。 これはCSSになると最悪ですので、これを多く改善することができます。ブートストラップと、次のCSSを使用した
は
次のHTML<body>
<div class="d">
<div class="col-md-12 col-md-offset-3">
<img class="pic l" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="leftImage">
<img class="pic r" src="http://solarsystem.nasa.gov/images/galleries/618486main_earth_320.jpg" id="rightImage">
</div>
</div>
</body>
で
.l {
clip-path: polygon(0% 0%, 100% 0%, 80% 100%,0% 100%);
filter: grayscale(100%);
position:absolute;
z-index: 2;
}
.r {
left: 540px;
margin-left: -20%;
clip-path: polygon(20% 0%, 100% 0%, 100% 100%,0% 100%);
filter: grayscale(100%);
position:absolute;
z-index: 1;
}
.d {
position:relative
}
を含み、これは（canEnter変数が最善の解決策にはほど遠いですが、それは何もないよりはましだ）JS：
をwindow.onload = function(){
var canEnter = true;
$('#leftImage')[0].hX2 = $('#leftImage').height() * 2;
$('#leftImage')[0].h = $('#leftImage').height();
$('#leftImage').on('mouseenter', function(){
if (!canEnter)
return;
canEnter = false;
this.style.filter = 'none';
this.style.zIndex = 2;
this.style.clipPath = 'none';
$(this).animate({height: $('#leftImage')[0].hX2}, "fast");
});
$('#leftImage').on('mouseleave', function(){
$(this).animate({height: $('#leftImage')[0].h}, "fast", function(){
this.style.filter = 'grayscale(100%)';
this.style.zIndex = 1;
this.style.clipPath = 'polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%)';
if (!canEnter)
canEnter = true;
});
});
$('#rightImage').on('mouseenter', function(){
if (!canEnter)
return;
canEnter = false;
this.style.filter = 'none';
this.style.zIndex = 2;
this.style.clipPath = 'none';
$(this).animate({height: $('#leftImage')[0].hX2, left: 300}, "fast");
});
$('#rightImage').on('mouseleave', function(){
$(this).animate({height: $('#leftImage')[0].h, left: 540}, "fast", function(){
this.style.filter = 'grayscale(100%)';
this.style.zIndex = 1;
this.style.clipPath = 'polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%)';
if (!canEnter)
canEnter = true;
});
});
}
これを達成するために試行したことの証拠で質問する必要がありますゴール。私たちはあなたのためにそれをしないためにここにいます。 – Sicae
はい、わかっています。私はちょうどこのアイデアを持っていたので、使用できるテンプレートがあると思ったので、0から始める必要はありません – sundri23
あなたがしようとすると、あなたのコードを共有してください。 –