Question 45337 in Html Question posted in
Some basic documentation can be found here.

Turning an a link into a div? – Html

I’m trying to make a webpage where when the user hovers over the text, an image appears. I found a working code, but it showing as a link and I don’t want it to. My idea is to have a list of items and when the user hovers over each one, a new image appears.

.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }
<div class="hover_img">
    <a href="#">flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span></a><br>
    <a href="#">pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span></a>
</div>
Tags:

2

Answers


  1. 0

    replace the a tags with div tags, like this

    .hover_img div { position:relative; }
.hover_img div span { position:absolute; display:none; z-index:99; }
.hover_img div:hover span { display:block; }
    <div class="hover_img">
    <div>flippe flute<span><img src="//picsum.photos/200?c=1" alt="image" height="200" /></span></div>
    <div>pottery flute<span><img src="//picsum.photos/200?c=2" alt="image" height="200" /></span></div>
</div>
    Login or Signup to reply.
  2. 0

    You can use the same code as the question with few changes mentioned in my code. No need to use div for it. Just you have to style it the way that it looks like a list items.

    .hover_img a { position:relative; font-family: Arial, sans-serif; padding: 40px 15px; border: 1px solid #ddd; border-bottom:none; display: block; color: #666; text-decoration: none; }
.hover_img a:first-child { border-radius: 10px 10px 0 0; }
.hover_img a:last-child { border-bottom: 1px solid #ddd; border-radius: 0 0 10px 10px; }
.hover_img a span { position:absolute; right: 10px; top: 10px; height:calc(100% - 20px); display:none; }
.hover_img a span img { max-width: 100%; height: auto; max-height: 100%; }
.hover_img a:hover { background-color: #eee; color: #333; }
.hover_img a:hover span { display:block; }
    <div class="hover_img">
    <a href="#">flippe flute<span><img src="https://picsum.photos/200?c=1" alt="image" /></span></a>
    <a href="#">pottery flute<span><img src="https://picsum.photos/200?c=2" alt="image" /></span></a>
</div>

    Hope it fulfils your requirement.

    Thanks

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search