I have a link in text on this page, https://melodylakerart.com/product/sun-on-skin-mask-duplicate-1/ which when hovered over produces a pop up image.
As you can see, the text is broken – all the text between "sensitive’ and ‘off" should be on one line (including the link)
How do I get rid of the weird line breaks?
CSS is:
.hover_img a {
position: relative;
}
.hover_img a span {
position: absolute;
display: none;
z-index: 99;
}
.hover_img a:hover span {
display: block;
}
.hover_img a:hover span {
display: block;
width: 350px;
}
HTML is:
Sensitive ears? Add an
<div class="hover_img">
<a href="#">adjustable silicone strap
<span>
<img src="https://melodylakerart.com/wp-content/uploads/2020/06/Hanwell-Rainbow-Mask-1.jpg" alt="image" height="100" />
</span>
</a>
<div>
to take the pressure off
2
Answers
you have some problemes with the HTML tags organisation
try to replace the the full
<div class="hover_img">
with this codeThe addon is doing something strange with the internal div. It wraps the content in a p tag and pushes the div outside. Best to remove it as not needed and move the class name to the a tag (except)….. Change the a to a span because then you wont have the clickable behaviour.
Change the html to:
Modify the Css: