Placing images on top of links [closed]

Navigation
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><olclass="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 it when I hovered over the item or Dino, his picture appeared ...

Is this possible? Thank you for your time!

    
asked by anonymous 26.11.2018 / 23:37

2 answers

2

Yes, it is possible and this 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 this class as exemplified in this answer

    
26.11.2018 / 23:52
1

You can do this as follows 

.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">

The :hover property is a kind of CSS event that runs when the previous element of : has the mouse passed over it and ~ as a sibling element selector , you can see more HERE

In the example you gave, I believe that if you put your list like this, it 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>
    
26.11.2018 / 23:56
C # Web API 2 - AJAX Request for Method PUT Returning 405 (Method Not Allowed) MySQL Error 1064