1

I know this question has been asked a hundred times and I have read every last one of them.

I have an image that is also a link. When the image is hovered it shows a new image and I have a small paragraph description I would like to pop up next to the image when the link is hovered over as well. Simple, right?

What i'm doing makes sense to me, and is the answer to this question. What am I doing wrong? This seems very straightforward.

How to show text on image when hovering?

I will paste my relevant code. Comparing to the posted link answer, I have the class project1 instead of imgWrapper and novelDescrip instead of imgDescription

HTML

<div class="project1">
        <a href="#"><img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" /></a>

        <p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p>

</div>

CSS

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

EDIT

Here is my problem now, the text hides and reveals but the hover is activated anytime my mouse is hovering in the area enclosed by the rectangle I drew on this image. Any ideas on why this is happening?

enter image description here

Community
  • 1
  • 1
zburns12
  • 1,783
  • 3
  • 15
  • 16

2 Answers2

0

You don't need the the positions. top:0;left: 0; with absolute positioned div will always show up on top left corner of the browser. also added display:inline for the novelDescrip for the div to show-up next to the image.

.project1 p {
    width: 25%;
    margin: 20px 15px 0 0;
    float: right;
}

.novelDescrip {
    position: absolute;
    visibility: hidden;
    opacity: 0;

    -webkit-transition: visibility opacity 0.2s;
    display:inline;
}

.project1:hover .novelDescrip {
    visibility: visible;
    opacity: 1;
}

Hope this is what you are looking for.

bansi
  • 55,591
  • 6
  • 41
  • 52
  • This works! It makes the paragraph hide and display. However, the area that activates the reveal is far larger than the image. Any idea why that might be? – zburns12 Oct 25 '13 at 04:10
  • If I hover above the image or on the same level as it the paragraph is activated. – zburns12 Oct 25 '13 at 04:17
  • you are using `width: 25%;`. try to change to fixed `width: 150px;` also you can set the `z-index` to a higher value for `p` if it goes behind the any other element. – bansi Oct 25 '13 at 04:39
0

My be this will solve your problem

img {
    height:30%;
    width:30%;
}
.project1 p
{
    width: 65%;
    float: right;
    display:none;
    margin-left:5px;
}
.project1:hover .novelDescrip
{
    display:block;
}

Live Demo

Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49
  • This also works to hide and reveal. Thanks! Do you know why the hover area is larger than my image? I posted a screenshot on the original post. – zburns12 Oct 25 '13 at 05:00
  • 2
    @zburns12 as hover is set for class of container div, if you want it samller, change the hover for image only – Vinay Pratap Singh Bhadauria Oct 25 '13 at 05:02
  • That makes perfect sense, however, the reveal quits working. It's always hidden. My picture has the id="novel" so wouldn't I just change it to #novel:hover .novelDescrip { display:block; } ? Or did I not do that correctly? – zburns12 Oct 25 '13 at 05:11