Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.infosystems.www.authoring.stylesheets > #5296

Re: Displaying a pop-up thumbail for a list element

Cross-posted to 2 groups.

Followups directed to: comp.infosystems.www.authoring.stylesheets

Show all headers | View raw

[X-Post & F'up2 comp.infosystems.www.authoring.stylesheets]

Thomas 'PointedEars' Lahn wrote in comp.lang.javascript:

> […]
> This code is untested, but the scripted stylesheet approach works in 
> Chromium 34 (I have tested it with a paragraph and an image in the CSS
> 2.1 Specification there).  It should also work everywhere else.
> 
> An advantage of only showing and hiding the “img” element with scripting
> is that this solution can be made more accessible if the “img” element is
> generated always, and only hidden/shown with scripting (by constructor and
> on event).  In that case the pre-existing “img” element could be accessed
> by a name or ID whose prefix or suffix corresponds with that of the ID of
> the event target.

Actually, given a recent enough layout engine, there is the possibility of 
not requiring client-side scripting here at all.  You can have transitions 
(and animations), too.

HTML¹:

  <div class="thumbnail-container">
    <div class="trigger">…</div>
    <img src="…" alt="…" class="thumbnail">
  </div>

CSS:

  .thumbnail-container {
    position: relative;
  }

  .trigger + img {
    position: absolute;
    top: 0;
    opacity: 0;
    transition-duration: 0.5s;
    z-index: -1;
  }

  .trigger:hover + img,
  .trigger:focus + img
  {
    opacity: 1;
    z-index: auto;
  }

________
¹  use semantic markup instead of “div” elements where possible
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

Back to comp.infosystems.www.authoring.stylesheets | Previous | Next — Next in thread | Find similar | Unroll thread

Thread

Re: Displaying a pop-up thumbail for a list element Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-06-06 18:31 +0200
  Re: Displaying a pop-up thumbail for a list element Christoph Michael Becker <cmbecker69@arcor.de> - 2014-06-07 15:58 +0200

csiph-web