How to shift iframe towards right side? - html

Question

I'm currently working on the feature in which whenever a user hovers over a link, instant preview is shown below the link. Like this -
What I wanted to do is, whenever a user hovers over a link, iframe should shift towards right, just like in Google Instant preview.
<div class="title" (mouseover)="overTitle()" (mouseleave)="overTitle()">
{{item.title}}
<div class="box">
<iframe width="400px" height="400px" [src]="myUrlList[i]"></iframe>
</div>
</div>
CSS file -
.box {
display: none;
width: 100%;
}
a:hover + .box, .box:hover{
display:block;
position: absolute;
z-index:100;
}
I tried using align="right" in div tag, but nothing happens. Also in .box class in CSS, I tried using float: right;, but nothing happens. It will be very much helpful if someone can help me. :)

Answer 1

Check something like that, without JS, pure CSS.
https://jsfiddle.net/fxdhcrxj/2/
I just use opacity and visibilityto animate fade in and out, you can use any other methods, like JS fade In out etc.
In CSS if you want catch next element use ~
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" >
TITL0E
<div class="box">
<iframe width="400px" height="400px" src="https://www.w3schools.com"></iframe>
</div>
</div>
Important Note:
If you want put lot of Iframes, on page use Lazy load on them.
Simply just replace src attr when someone hover over title or use scripts e.g
http://dinbror.dk/blog/blazy/ otherwise your page will load really slow and make lot of freezes etc.
For better mobile support you may also use focus on element, not only hover

Answer 2

Here you go: http://codepen.io/ruchiccio/pen/vxVoKd
a:hover + .box, .box:hover {
display:block;
position: absolute;
right:0;
top:0;
z-index:100;
}
You need to have right:0; set for the box. Also, your .box was set for a 100% width which is why the iframe didn't know where to go. You have to options: Either set the box width to 400px, which is the same as the iframe (which is what I did in my codepen):
.box {
display: none;
width: 400px;
}
OR you may leave the 100% width but then add text-align:right; to the .box class. Both work.
.box {
display: none;
width: 100%;
text-align: right;
}