How can I show an image when hover in a link?

Question

I'm trying to show a hidden section when hover in a link, but I can't make it.

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="">Wasted Time</a></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a></p>
    </section>
</section>
<section class="preview">
    <section id="preview-01"><img src="img/preview-project-01.jpg"/></section>
</section>

I want to show #preview-01 when hover #fromdesigner and replicate to the other links and images.

This is how website looks without hover

And this is what I'm trying to make

Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. See the [ask] page for help clarifying this question. — Praveen Kumar Purushothaman, Jul 13 '19 at 15:04
I am creating my portfolio using HTML and CSS. In the home I have a list of links that lead to my projects and I would like to make hover on one of these links to show a cover image. The links and the images that correspond to them are in different sections. I have tried several things and I do not get the desired effect. — Luiso Vázquez, Jul 13 '19 at 15:10
Ok, so if i understand you correctly, you want a popup on mouseover which locates at the mouse, and shows the cover of that project as an image? — Techno, Jul 13 '19 at 15:16
Maybe have a look at this issue: https://stackoverflow.com/questions/56425667/how-to-show-an-image-in-tooltip — Techno, Jul 13 '19 at 15:24
he uses an awkward image(for its size) as example but i think you can work it out with this right? — Techno, Jul 13 '19 at 15:26
Yes, I think it would work. But with a code like that can I place the image wherever I want? Or it has to be under the link? — Luiso Vázquez, Jul 13 '19 at 15:28

Showrin Barua · Accepted Answer · 2019-07-13T16:08:29.970

I've a solution for you. I've posted it here. Hope it will be helpful.

function imgShow1() {
  document.getElementById('preview-01-img').style.opacity = 1;
}

function imgHide1() {
  document.getElementById('preview-01-img').style.opacity = 0;
}

function imgShow2() {
  document.getElementById('preview-02-img').style.opacity = 1;
}

function imgHide2() {
  document.getElementById('preview-02-img').style.opacity = 0;
}

function imgShow3() {
  document.getElementById('preview-03-img').style.opacity = 1;
}

function imgHide3() {
  document.getElementById('preview-03-img').style.opacity = 0;
}

function imgShow4() {
  document.getElementById('preview-04-img').style.opacity = 1;
}

function imgHide4() {
  document.getElementById('preview-04-img').style.opacity = 0;
}

.preview img {
  height: 10vw;
  width: 20vw;
  object-fit: cover;
  opacity: 0;
  transition: all .33s ease-in-out;
}

.preview section {
  display: inline-block;
}

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="" onmouseover="imgShow1()" onmouseleave="imgHide1()">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow2()" onmouseleave="imgHide2()">Wasted Time</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow3()" onmouseleave="imgHide3()">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="" onmouseover="imgShow4()" onmouseleave="imgHide4()">Aesthetic Posters</a></p>
    </section>
</section>
<section class="preview">
    <section id="preview-01"><img id="preview-01-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-02"><img id="preview-02-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-03"><img id="preview-03-img" src="https://i.imgur.com/J67Ukc8.jpg"/>
    <section id="preview-04"><img id="preview-04-img" src="https://i.imgur.com/J67Ukc8.jpg"/></section>
</section>

It works perfectly, but now how can I make the second link show another image? — Luiso Vázquez, Jul 13 '19 at 15:48
@LuisoVázquez I've edited my solution according to your requirement. Check it. And one more thing, if it works for you then please mark the answer as accepted. :) — Showrin Barua, Jul 13 '19 at 16:09
Works perfect! Just what I was looking for, thank you very much! — Luiso Vázquez, Jul 13 '19 at 16:20

Mohammed Metwally · Answer 2 · 2019-07-13T15:48:02.207

Actually, in css you cant do hover effect unless if you target child or sibling, i have edit your html to be like the next snippet, its not the best solution, and not responsive, but at least without javascript

#projects{
  position: relative;
}

p{
  width: 50%;
}
.preview{
  display: none;
}
img{
  width: 50%;
  right: 0;
  position: absolute;
  top: 15px
}
#america-regular-list1:hover ~ .preview{
  display: block;
}

<section class="projects">
    <section id="project-list">
        <p id="america-regular-list1"><a id="fromdesigner" href="">From Designer to Designer</a></p>
        <p id="america-regular-list"><a href="">Wasted Time</a></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a></p>
      
      <div class="preview"><img src="https://www.jamierubin.net/wp/wp-content/uploads/2015/12/Blog-Header-Burke.jpg"/></div>
    </section>
</section>

you can achieve what u want easily in jQuery or vanila JS.

my note : don't repeat ID in your html, its not good practice.

score 0 · Answer 3 · answered Jul 13 '19 at 15:40

I don't quite understand your problem here. But you could embed each image under each link.

    <section id="project-list">
        <p id="america-regular-list"><a id="fromdesigner" href="">From Designer to Designer</a><img src="img/preview-project-01.jpg" id="hello"/></p>
        <p id="america-regular-list"><a href="">Wasted Time</a><img src="img/preview-project-01.jpg" /></p>
        <p id="america-regular-list"><a href="">Thirty Logos</a><img src="img/preview-project-01.jpg"/></p>
        <p id="america-regular-list"><a href="">Aesthetic Posters</a><img src="img/preview-project-01.jpg"/></p>
    </section>
</section>

In Css:

img{
display: none;
}
a#fromdesigner:hover #hello{
display: inline-block;
}

Hope it helps!!

How can I show an image when hover in a link?

3 Answers3