0

I have searched for an answer but I cannot find a facile solution. In the example below, I want to delay the apperance of the preview by a defined time, e.g. 2 seconds, AFTER I hover over the link.

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

a:hover + .box, .box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
This live preview for <a id="someelem" href="http://en.wikipedia.org/">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/" width = "500px" height = "500px"></iframe></div> remains open on mouseover.

Edit/update 1:

Thank you for your suggestions. Closer, but not quite there, yet! This animated GIF is explains what I am doing; I'd like that content (e.g. image placeholders) to remain visible, and upon mouseover delay the appearance of the popup by -- e.g. -- 3 seconds.

enter image description here

Edit/update 2: Solution!

I managed to solve this. Rather than posting an answer to my own question, I'll simply update it here. The HTML code below works as I intended, and contains a link to a working demo on JSBin.com. [The "DuckDuckGo" iframe does not work here, but it does work on JSBin ( http://jsbin.com/janaheheju/edit?html,css,output ) and in my home browser (local web page).

Thanks again to you all for your time and help: very much appreciated! :-)

<style type="text/css">
.thumbnail{
    position: relative;
    z-index: 0
}

.thumbnail:hover{
    //background-color: transparent;
    z-index: 50
}

/* CSS FOR ENLARGED IMAGE: */
.thumbnail span{
    position: absolute;
    background-color: #eeeeee;
    padding: 2px;
    left: -1000px;
    //border: 2px dashed gray;
    //border: 2px dashed gray;
    border: 1px solid blue;
    visibility: hidden;
    color: black;
    text-decoration: none;
    transition-delay: 0s 1s
}

/* CSS FOR ENLARGED IMAGE: */
    .thumbnail span img{
    border-width: 0;
    padding: 2px
}

/* CSS FOR ENLARGED IMAGE ON HOVER: */
.thumbnail:hover span{
    visibility: visible;
    top: 0px;       /* ENLARGED IMAGE: VERTICAL OFFSET [+ : above baseline | - : above baseline]   */
    left: 0px;      /* ENLARGED IMAGE: HORIZONTAL OFFSET [+ : right | - : lest] */
    transition-delay: 1s;
    background-color: #eeeeee;
    opacity: 1
}
<BODY BGCOLOR="#eeeeee">

<!-- CSS code, ideas from: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/P10/ -->

<UL>

<p>
This code on <a href="http://jsbin.com/janaheheju/edit?html,css,output">JSBin.com</a>

<br><hr size=2 color=green align=left><br>

<p>
<a class="thumbnail" href="https://upload.wikimedia.org/wikipedia/commons/0/00/Yellowstone-wolf-17120.jpg"><font color=green>A Wolf!</font><img src="https://upload.wikimedia.org/wikipedia/commons/2/26/Amarok_bw.png" width="50px">
<span><img src="https://upload.wikimedia.org/wikipedia/commons/0/00/Yellowstone-wolf-17120.jpg" width="400px"><br>What are <i><b>you</b></i> looking at? :-p</span></a>

<p>
Here is an iframe'd <a class="thumbnail" href="http://en.wikipedia.org/">Wikipedia<img src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/Wikipedia-logo-v2.png" width="50px"><span><iframe src="http://en.wikipedia.org/" width="800px" height="500px"></iframe><br><b><font color=magenta>... more caption text here [optional] ...</font></b></span></a> front page, that serves as a navigable preview pane for web pages, images, text files, images, videos, other content)!  ;-)

<br><br><hr size=2 color=green align=left>

<p>
Some headlines, via&nbsp; <a class="thumbnail" href="https://duckduckgo.com/?q=news&ia=web"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/11/DuckDuckGo_logo_and_wordmark_%282014-present%29.svg/312px-DuckDuckGo_logo_and_wordmark_%282014-present%29.svg.png" width="75px"><span><iframe src="https://duckduckgo.com/?q=news&ia=web" width = "1000px" height = "600px"></iframe></span></a> 

<p>
Nonsense, pure nonsense: 

    <ul>
        <font size=2>"<i>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</i>"</font>
    </ul>

<p><hr size=2 color=green align=left><p>

<br><br><br><br>
</UL>
</BODY>
Victoria Stuart
  • 4,610
  • 2
  • 44
  • 37
  • Dalay 3 sec.. If cursor under iframe then iframe open. What not quite there? What your browser and OS? – Alexander V. Ulyanov Oct 11 '16 at 21:14
  • Hi Alexander: please see my comments, under your answer. I am using Firefox 49.0.1 on an Arch Linux x86_64 system. – Victoria Stuart Oct 11 '16 at 23:29
  • Im make editing/update my answer. Taste it and it : http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/33866294#33866294 – Alexander V. Ulyanov Oct 12 '16 at 06:58
  • Looking at this issue, I think that my orginal question should simplified as the ability to specify a thumbnailed iframe (i.e. an image/thumbnail that links to the iframe), with the iframe appearing -- after a short delay -- when the thumbnail image is hovered upon. [The thumbnail could, of course, also simply be a URL.] ... Perhaps using a tagset? I see no reason for the hidden box approach (.box), in my original post, above - it ssems cumbersome and limiting. The iframe itself is the key element; we can (e.g.) specify it's dimensions -- width; height; etc. -- directly. – Victoria Stuart Oct 12 '16 at 22:09
  • Use – Alexander V. Ulyanov Oct 19 '16 at 02:39

3 Answers3

1

You can't transition display property but you can use visibility or opacity. Check this jsfiddle I made to demonstrate. https://jsfiddle.net/kthd9k28/

You can position the element absolutely, if you don't want it to break your design when it appears or disappears.

Varin
  • 2,354
  • 2
  • 20
  • 37
  • Code, comments here: http://jsbin.com/ragegalavi/edit?html,css,output Summary: works, but now need to bracket all URLs (a tags) with div tags; white space equivalent to hidden content. Nice try, though - appreciated! As you can see, the problem is not 'trivial.' – Victoria Stuart Oct 11 '16 at 23:03
1

iframe{
position:absolute;
left:0;
width:100%;
height:0;
border:0
}

a:hover iframe{
height:500px;
transition:.2s 2s
}
This live preview for <a id="someelem" href="http://en.wikipedia.org/">Wikipedia
<iframe src="http://en.wikipedia.org/"></iframe></a> remains open on mouseover.
Alexander V. Ulyanov
  • 346
  • 2
  • 15
  • Another good answer (close but not quite there); code/comments here: http://jsbin.com/didedexoya/edit?css,output Short summary: preview W, H hard-coded in CSS definition. – Victoria Stuart Oct 11 '16 at 23:20
  • Taste another my answer : http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css/33866294#33866294 – Alexander V. Ulyanov Oct 12 '16 at 06:28
0

After "a" and ".box" inner JavaScript : 

someelem.onmouseover=function(){setTimeout(function(){document.querySelector('.box').style='display:block;position:relative;z-index:100'},811)},
document.querySelector('.box').onmouseout=function(){this.style=''}
.box{display:none}iframe{width:500px;height:500px}
This live preview for <a href="http://en.wikipedia.org/" id="someelem">Wikipedia</a><div class="box"><iframe src="http://en.wikipedia.org/"></iframe></div> remains open on mouseover.
Alexander V. Ulyanov
  • 346
  • 2
  • 15