/    Sign up×
Community /Pin to ProfileBookmark

Show image on mouseover text

Copy linkTweet thisAlerts:
Feb 15.2018

Hello!

Now i use CSS to show an image on mouseover but i need something better.

[CODE]img{
display: none
}

p.one:hover + img{
display: block;
}

<p class=”one”>Text.</p><img src=”1.png” >
[/CODE]

I don’t like this because my other paragraphs goes down. I want all my paragraphs to stay in the same position and image to be displayed on mouseover text in cursor position. Mouse arrow to be in the upper-left of the image.

Thank you!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumFeb 15.2018 —  my other paragraphs goes down[/QUOTE]You can avoid this by positioning the image absolutely.
Copy linkTweet thisAlerts:
@JMRKERFeb 16.2018 — Depending upon the needs of your programmed display

you might try using the "visibility" command in CSS

See: https://www.w3schools.com/CSSref/pr_class_visibility.asp

Hard to tell if this will do as you have not given any HTML to view.

Strickly a guess. ?
<i>
</i>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8" /&gt;
&lt;title&gt; HTML5 page &lt;/title&gt;
&lt;!-- For: http://www.webdeveloper.com/forum/showthread.php?368562-Show-image-on-mouseover-text --&gt;
&lt;style&gt;
#p1:hover + img { visibility: visible; }
img { visibility: hidden; }
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;p id="p1"&gt;The first paragraph is visible.&lt;/p&gt;
&lt;img src="https://www.nova.edu/portal/optometry/otm/gifs/flag.gif"&gt;
&lt;p&gt;The second paragraph is visible.
Notice the image is still occupying space.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@deplasare1authorFeb 16.2018 — Thank you, problem solved.

[CODE]

<style>
img{
display: none; margin-left: 150px;
position:absolute;}

p.one:hover + img{
display: block;
}

</style>

[/CODE]
Copy linkTweet thisAlerts:
@rootFeb 18.2018 — You can do this in CSS
a&gt;div { display: none; }
a:hover&gt;div { display: block; }
[code=html]<a>Hover on this<hr/><div><img src="image/path/picture.jpg" ></div></a>[/code]
Copy linkTweet thisAlerts:
@JMRKERFeb 19.2018 — You can do this in CSS
a&gt;div { display: none; }
a:hover&gt;div { display: block; }
[code=html]<a>Hover on this<hr/><div><img src="image/path/picture.jpg" ></div></a>[/code][/QUOTE]

I'm not sure that cuts it with the OP original requirement.

I don't like this because my other paragraphs goes down. I want all my paragraphs to stay in the same position and image to be displayed on mouseover text in cursor position. Mouse arrow to be in the upper-left of the image.
[/QUOTE]
Copy linkTweet thisAlerts:
@rootFeb 20.2018 — I'm not sure that cuts it with the OP original requirement.[/QUOTE]

Well it's take it or leave it and I am aware of the effect they want, not sure how to describe it but I think the effect is to have it "Overlay" like its a popup, so if they styled it, set a z-index, possibly, set its position or messed with those types of settings and had the text run thru (but behind the image) that might be some sort of way of dealing with it.

CSS aint my strongest area, so its at this point I will have to fold.
×

Success!

Help @deplasare1 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...