Question

I am trying to get a link when hovered to show an image just to the left of the link. I have achieved almost what I want minus I am having an html issue.

Trying to get my redtext class to show up on the backslash on the link that has the rollover effect.

Is there a way around this or better way of achieving this? The link in Question is yaya Photography

The CSS

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ 
position: absolute;

left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ 
border-width: 0;
padding: 0px;
}

.thumbnail:hover span
visibility: visible;
top: -25px;
left: -125px; 

}

And here is the html I am struggling to get to work

<a class="thumbnail" href="#accordion"><h3><span class="redtext">/</span> yaya Photography</h3><span><img src="images/yaya/yayathumb.png" /></span></a>

Thanks in advance!

Answer 1

Your problem is that your styles on span are affecting the class="redtext" span also.

A simple way to fix this: you can get rid of the span around your img, and then change the references to span in your CSS to reference img instead.