CODEWITHSUNDEEP
htmlcss
Johnny Hankgard
Johnny Hankgard

Reputation: 469

Preview of text behind a link

Is it possible to display a "preview" of whats behind a link using css and html?

For instance: i have some textual information behind a link, but i want to show a part of this text beside the link... is it possible to do so without manually writing it down?

Here is the code example

<dl>
<dt>News</dt>
<dd></dd>
<a href=".html"><img src=".jpg" height=100 width=120/>Some text</a>
    <p>This is the text i want to use as a preview of whats behind the active href link</p>
</dl>

Upvotes: 0

Views: 241

Answers (3)

raddrick
raddrick

Reputation: 4453

every link can have a tool-tip easily added to the link

<a href="/users/811785/saeed" title="5623 reputation" class="comment-user">Saeed</a>

use the title attribute to add your 'preview' so that when someone mouse's over a link and hovers for a moment, they can see the tool-tip :)

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

In CSS, set the element containing the link (dd in your case—the markup <dd></dd> must be a typo, the end tag should appear after the content, the a and p elements) to be relatively positioned. Set display: none for the p element but when hovered, make it absolutely positioned (which really means that it will be positioned relatively to the enclosing element) and turn it to visible. Add suitable background, border, and other stuff. The details depend on the context. The following would be one possibility if the img elements all use images that are 100px tall (so that 108px or something that is a suitable displacement for the p element).

<style>
dd p {
  display: none; }
dd {
  position: relative; }
dd:hover p {
  display: block;
  margin: 0;
  position: absolute;
  top: 108px;
  background: #ffd;
  color: black;
  border: solid gray 0.08em;
  padding: 0 0.2em;
  z-index: 1000;
  max-width: 20em;
}
</style>

Upvotes: 0

Saeed Neamati
Saeed Neamati

Reputation: 35822

Overlapping and displaying through can be done via CSS properties z-index and opacity. However, you have to use absolute positioning to stack elements on each other.

Upvotes: 1

Related Questions