Place images on top of links

Asked

Viewed 906 times

0

Hi! I wanted an image to appear when I hovered over an HTML link...

Here, what I have now...

<body>
<img src="https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/7/7b/ARK-_Extinction.png?version=64858f8a63faac340a9254a539dc2386" />
    <center><h1>Objetivos</h1></center>
    <ol class="center"> 
    <li>Spawn on <a href="https://ark.gamepedia.com/Sanctuary_(Extinction)" target="_blank" >Sanctuary</a> Central...</li>
    <li>Farm <a href="https://ark.gamepedia.com/Wood" target="_blank" >Wood</a> and <a href="https://ark.gamepedia.com/Stone" >Stone</a>...</li>
    <li>Build a House Lv. 1...</li>
    <li>Craft <a href="https://ark.gamepedia.com/Single_Panel_Flag" target="_blank" >Single Panel Flag</a>...</li>
    <li>Tame a <a href="https://ark.gamepedia.com/Doedicurus" target="_blank" >Doedicurus</a>...</li>
    <li>Craft <a href="https://ark.gamepedia.com/Bola" title=img src="https://d1u5p3l4wpay3k.cloudfront.net/arksurvivalevolved_gamepedia/a/ae/Bola.png?version=8877e768ace7aa0e07bb2159d176f571" target="_blank" >Bola</a>...</li>
    <li>Tame a <a href="" >Pterodon</a>...</li>
    <li>Craft <a href="" >Dino Leash</a>...</li>
    <li>Tame a <a href="" >Managarmr</a>...</li>
    <li>Tame a <a href="" >Snow Owl</a>...</li>
    <li>Free Pterodon...</li>
    <li>Craft <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=889745138&searchtext=" >Awesome Teleporter</a>...</li>
    <li>Go to: 45.1, 46.2</li>
    <li>Build a Green House on 45.1, 46.2...</li>
    <li>Tame a <a href="" >Velonasaur</a>...</li>
    <li>Defend a <a href="" >Element Node</a>...</li>
    <li>Craft <a href="" >Cryofridge</a>...</li>
    <li>Craft <a href="" >Cryopods</a>...</li>
    <li>Craft <a href="" >Tek Armor</a>...</li>
    <li>Tame a <a href="" >Thylacoleo</a>...</li>
</ol>

<center><h2>Maybe</h2></center>
<ul class="center">
    <li><a href="" >Tek Bridge</a></li>
    <li><a href="" >Scout Remote</a></li>
</ul>
</body>

I wanted when I hovered over the item or Dino’s photo...

Is that possible? Thank you for your time!

html image link

  • Dude put what you already have of code there, or at least the layout you are trying to replicate. The way you asked the question

2 answers

3

It is possible yes and that is a possibility:

a.y:hover {
 width: 256px;
 height: 256px;
 color: #ffffff;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(https://i.pinimg.com/originals/dc/ff/62/dcff629625d17e9c90981c6f07798a80.png);
 background-repeat: no-repeat;
 }
 
 a.z:hover {
 width: 256px;
 height: 256px;
 color: #000000;
 font-weight: bold;
 text-decoration:none;
 display: block;
 background-image : url(https://i.pinimg.com/originals/8f/d6/d0/8fd6d0e4b94ede5ca1d90c2e32e62b1d.jpg);
 background-repeat: no-repeat;
 }
<ul class="center">
<li><a href="" class="y">Tek Bridge</a></li>
<li><a href="" class="z">Scout Remote</a></li>
</ul>
</body>

put a class in the link and develop the css for that class as exemplified in that answer

  • Very kind of you! Seriously, you’re very cool so, plus, I wanted each link to have a different image, is possible with this?

  • Yes, various css

  • @Maxwhite in the solution I put below, you could encapsulate the link and the image in a div and replace only the image address, I believe it will work.

1

You can do it this way

.imageSumida {
    display: none;
}
.hoverImage:hover ~ .imageSumida {
    display: block;
}
  <a href="http://google.com" target="_blank" class="hoverImage">Uma imagem deve aparecer. PASSE o MOUSE e descubra</a>
<img src="https://static.imagensparawhats.com.br/content/assetz/uploads/2018/08/memes-imagem-engracada-so-me-falta-o-dinheiro---.png" alt="Serei Rico" class="imageSumida">

Being the property :hover a kind of event in CSS which is executed when the item before the : has the mouse passed over it and the ~ as selector of sibling elements, you can see more HERE

In the example you gave, I believe that putting your list like this will solve

.imageSumida {
    display: none;
}
.hoverImage:hover ~ .imageSumida {
    display: block;
}
<ol>
  <li>
    <a href="https://google.com" class="hoverImage">A imagem irá aparecer, tenha FÉ</a>
    <img class="imageSumida" src="https://static.imagensparawhats.com.br/content/assetz/uploads/2018/08/memes-imagem-engracada-so-me-falta-o-dinheiro---.png" alt="Serei Rico">
  </li>

  <li>
    <a href="https://google.com" class="hoverImage">Outra imagem irá aparecer</a>
    <img class="imageSumida" src="https://i.etsystatic.com/9828894/d/il/8da85f/637254848/il_340x270.637254848_nxac.jpg?version=1" alt="Serei Rico">
  </li>
</ol>

Browser other questions tagged html image link

You are not signed in. Login or sign up in order to post.