Pass url to hovered / focused image

I have some html / css code that is able to display an image on hover over some text and on click, that image will become focused and remain on the page:

CSS portion
.hover_img a { position:relative; }
.hover_img a span { position:absolute; display:none }
.hover_img a:hover span {display:block; overflow:visible; height:200px; width:200px;position:absolute}
.hover_img a:focus span {display:block; overflow:visible; height:200px; width:200px}
HTML portion
<div class="hover_img">
<a href="#">German Shepherd
<span>
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12213218/German-Shepherd-on-White-00.jpg" alt="German Shepherd" />
</span>
</a>
</div>

The above code words well. The problem is that when I hover and/or focus on the text ‘German Shepherd", I want that hovered/focused image to be clickable and, when clicked on, would take the user to a new page. In other words, I would want something along the lines of:

HTML portion
<div class="hover_img">
<a href="https://www.akc.org/dog-breeds/german-shepherd-dog/">German Shepherd
<span>
<img src="https://s3.amazonaws.com/cdn-origin-etr.akc.org/wp-content/uploads/2017/11/12213218/German-Shepherd-on-White-00.jpg" alt="German Shepherd" />
</span>
</a>
</div>

However, if the above is implemented, then clicking the word ‘German Shepherd’ automatically takes the user to the URL. However, on the page where the hovered / focused image is displayed, they can click on that image and go to the correct website as well. I am trying to remove the former so that clicking on ‘German Shepherd" only acts as a focus, and then the user clicks on the hovered/focused image to go to the URL.

html, javascript, or css would be fine, unless jquery makes it much easier.

10 thoughts on “Pass url to hovered / focused image”

Leave a Comment