iframeを右側にシフトするにはどうすればよいですか？

Question

私は現在、ユーザーがリンク上を移動するたびにリンクの下にインスタントプレビューが表示されるように機能しています。このように - 私がやりたいこと

ユーザーがリンクの上に置いたときに、IFRAMEはちょうどGoogleのインスタントプレビューのように、右方向にシフトしなければならない、です。

<div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()"> 
        <a href="{{item.link}}">{{item.title}}</a> 
        <div class="box"> 
         <iframe width="400px" height="400px" [src]="myUrlList[i]"></iframe> 
        </div> 
       </div> 

CSSファイル -

.box { 
     display: none; 
     width: 100%; 
    } 

    a:hover + .box, .box:hover{ 
     display:block; 
     position: absolute; 
     z-index:100; 
    } 

私はdivのタグでalign="right"を使用してみましたが、何も起こりません。 CSSの.boxクラスでも、float: right;を使ってみましたが、何も起こりません。誰かが私を助けることができれば、とても助けになるでしょう。 :)

Answer 1

JS、純粋なCSSなしで、そのようなものをチェックしてください。 https://jsfiddle.net/fxdhcrxj/2/

私はちょうどあなたがキャッチ次の要素を使用したい場合は~

CSSでアウトなどでJSのフェードのように、あなたが他の方法を使用することができ、

を不透明度を使用して、フェードインとフェードアウトをアニメーションvisibilityto CSS：

.title{ 
    // for proper position absolute element inside 
    position: relative; 
} 

// We catch nexy element .box, and when some one hover over box 
.title a:hover ~.box, .title .box:hover{ 
    //display: inline; 
    visibility: visible; 
    opacity: 1; 
} 
// As i use element to bottom 0, I must translated it 100% below of his height. 
.title .box{ 
    //display: none; 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    position: absolute; 
    z-index: 10; 
    background: #fff; 
    bottom:0; 
    left:0; 
    transform: translateY(100%); 
} 

HTML：

<div class="title" > 
    <a href="#">TITL0E</a> 
    <div class="box"> 
     <iframe width="400px" height="400px" src="https://www.w3schools.com"></iframe> 
    </div> 
</div> 

重要な注意：

あなたはIフレームの置きたくさんしたい場合は、ページ上でそれらにレイジーロードを使用しています。誰かがいないだけでホバー、タイトルまたは使用のスクリプトが http://dinbror.dk/blog/blazy/がそうでなければ、あなたのページが本当に遅いロードする例えば上にカーソルを置くと、あなたも要素にfocusを使用することができフリーズなど

優れたモバイルサポートについての多くを作るとき は単純にSRC attrのを置き換えますここで

Answer 2

あなたが行く：http://codepen.io/ruchiccio/pen/vxVoKd

a:hover + .box, .box:hover { 
     display:block; 
     position: absolute; 
     right:0; 
     top:0; 
     z-index:100; 
    } 

あなたはボックスのright:0;セットを持っている必要があります。また、.boxは100％の幅に設定されていたため、iframeはどこに行くのかわかりませんでした。あなたは選択肢にあります。どちらかが（私は私のcodepenに何をしたかである）IFRAMEと同じである、400ピクセルにあるボックスの幅を設定します。

.box { 
    display: none; 
    width: 400px; 
} 

か、text-align:right;を追加し、100％の幅を残すかもしれないが、 .boxクラスに追加します。どちらも動作します。

.box { 
    display: none; 
    width: 100%; 
    text-align: right; 
}