Hey,

 

I want a text showing when you mouseover an image. Like this: http://www.sohtanaka.com/web-design/examples/image-hover/

 

I'm going to use it on a wordpress blog, displaying the text of a post when hovering over an image in the post. I've set this up and it works but the problem is I can't have links in the text.

 

the HTML

<div class="imgteaser">
<a href="#">
<img src="Daim1.jpg" alt="Daim Graffiti" />
<span class="more">» Learn More</span>
<span class="desc">
	<strong>DAIM 2002</strong>
	Blandit turpis patria euismod at iaceo appellatio, demoveo esse. Tation utrum utrum abigo demoveo immitto aliquam sino aliquip.
</span>
</a>
</div>

 

The CSS

.imgteaser {
margin: 0;
overflow: hidden;
float: left;
position: relative;
}
.imgteaser a {
text-decoration: none;
float: left;
}
.imgteaser a:hover {
cursor: pointer;
}
.imgteaser a img {
float: left;
margin: 0;
border: none;
padding: 10px;
background: #fff;
border: 1px solid #ddd;
}
.imgteaser a .more {
position: absolute;
right: 20px;
bottom: 20px;
font-size: 1.2em;
color: #fff;
background: #000;
padding: 5px 10px;
filter:alpha(opacity=65);
opacity:.65;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /*--IE 8 Transparency--*/
}
.imgteaser a:hover .desc{
display: block;
font-size: 1.2em;
padding: 10px 0;
background: #111;
filter:alpha(opacity=75);
opacity:.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
color: #fff;
position: absolute;
bottom: 11px;
left: 11px;
padding: 10px;
margin: 0;
width: 566px;
border-top: 1px solid #999;
}
.imgteaser a:hover .desc strong {
display: block;
margin-bottom: 5px;
font-size:1.5em;
}
.imgteaser a .desc {	display: none; }
.imgteaser a:hover .more { visibility: hidden;}

 

The problem is that the (a href="#") collides with any new links you put in the pop-up text. I can't seem to figure out a way to be able to have links in the text, is it possible doing this with CSS?

 

If not, could anyone suggest any other method of achieving what I want. I'm pretty novice with all of this.

 

Thanks!

This can be done with CSS,

 

I see at the bottom of your css you have

.imgteaser a .desc { display: none; }

 

All you would have to do display:block with some width and height to make it appear will do the job for you.

You will have to do it on a:hover, This can be done with JS and Jquery, but i don't know how to do it with those.

 

Hope this gives you a good idea

 

Ben

This can be done with CSS,

 

I see at the bottom of your css you have

.imgteaser a .desc { display: none; }

 

All you would have to do display:block with some width and height to make it appear will do the job for you.

You will have to do it on a:hover, This can be done with JS and Jquery, but i don't know how to do it with those.

 

Hope this gives you a good idea

 

Ben

I'm not sure if im following you.

 

The text shows up fine when hovering over the image. The problem is that I need to be able and have links in the text, which I cant because of the (a href="#") colliding with any new links I make in the text.

 

Thanks for the reply!

Had a look at the link you have supplied and i'm having a tinker now. I'll see what i can come up with, I'll try my best.

 

Ben

Had a look at the link you have supplied and i'm having a tinker now. I'll see what i can come up with, I'll try my best.

 

Ben

Thanks for the effort man.

 

I found another solution, using javascript and this jquery plugin called captify

http://plugins.jquery.com/project/captify

 

Now I can use links in the text, and it works great on wordpress blogs.