CSS HTML Link Image Hover changing paragraph format

3 Views

I’m pretty new to CSS so this might be a simple fix.

The code will display an image when a link is hovered over.

Read More

CSS 

.hover_img a { position:relative;}
.hover_img a span { position:absolute; display:none; z-index:99;}
.hover_img a:hover span { display:block;}

HTML 

<div class="hover_img">
<a href="#">1<span><img src="1.jpg" alt="image"/></span></a>
</div>
<div class="hover_img"><a href="#">2<span><img src="2.jpg" alt="image"/>
</span></a>      


</div>
and a 
<div class="hover_img">
<a href="#">3<span><img src="3.jpg" alt="image"/></span></a>
</div>.

This code works fine and does what I want. The problem is the links don’t present themselves normally in my paragraphs. I’d like it to say “1 2 and a 3” But instead it is 

"1
2
and a
3"

I’ve messed around with the positioning, tried adding all kinds of formatting to it and nothing seems to work. The paragraph formatting for the stylesheet is handled elsewhere, it’s using a wordpress template right now.

Any help would be appreciated 🙂

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. There a few things to address here.

    The problem is the links don’t present themselves normally in my paragraphs

    Firstly, you can’t use divs in paragraps, it’s invalid HTML and the browser will automatically close the p tags to resolve this.

    Secondly, an anchor tag is supposed to go somewhere. If it doesn’t, don’t use an anchor tag…use a span instead.

    If we eliminate the divs which are block level and so 100% wide, we can just use spans instead of links, which are also inline elements, we get.

    .hover_img {
  position: relative;
}

.hover_img span {
  position: absolute;
  display: none;
  z-index: 99;
  top:-100%;
  left: 0;
}

.hover_img:hover span {
  display: block;
}
    <p>
  <span class="hover_img">1<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span>, 
  <span class="hover_img">2<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span> and a
  <span class="hover_img">3<span><img src="http://www.fillmurray.com/16/16" alt="image"/></span></span>
</p>

    You haven’t mentioned how the images are supposed to be positioned so I’ve assumed you wanted them above the characters but that’s all adjustable.

  2. Div by default is a block element, to dispaly divs inline you need some css styling, You can read more about inline vs block elements here http://www.w3schools.com/html/html_blocks.asp.

    You don’t even need to wrap a tags in divs in your situation, It’s just more code.

     
a span { position:absolute; display:none; z-index:99;}
a:hover span { display:block;}
     
  <a href="#">1<span><img src="1.jpg" alt="image"/></span></a> 
 
  <a href="#">2<span><img src="2.jpg" alt="image"/></span></a>    
and a 
 
<a href="#">3<span><img src="3.jpg" alt="image"/></span></a>