Hover image with content on it

Question

I have an image that when hovered it has some text in it and you can click it still to get linked to another page. The thing is i don't think it practical the way i achieved it. I made the

tag with text a link and that is how i got the link and text to work when hovered. The text looks like a link and i just wanted normal text but at the same time keep the clickable image when hovered. I just want to know if the way i did it is practical or is there a better way?

jsfiddle - http://jsfiddle.net/gqg320on/1/

<section class="main_content">
    <article id="thumbnail_1">
        <div class="imgwrap">
         <a href=""><img src="images/taffies.jpg" alt="taffies website thumbnail"></a>
        <a href="http://www.google.com"><p class="imgDescription">sdasdasd</p></a>
        </div>
    </article>

    <article>
        <a href=""><img src="images/fitstyle-thumbnail.png" alt="fitstyle website thumbnail"></a>
    </article>
</section> <!-- end of section -->





.imgwrap{
width:260px;
height:200px;
position:relative;
}

.imgDescription{
background:blue;
visibility:hidden;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;

}



.imgwrap:hover .imgDescription{

visibility:visible;
}

I think you will find the answer to [this question](http://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) helpful. It covers a pretty solid approach. In your case, you would just use an anchor element for the parent wrapper. — Josh Crozier, Sep 24 '14 at 00:46
I did put the anchor element on the imgwrap div but it doesn't seem to make a difference. — Ralphunreal, Sep 24 '14 at 00:54
what if i want to type more than just a caption title? For example, it's for a portfolio so i want to put a small description on what i used to make it and who i work with to create the project. — Ralphunreal, Sep 24 '14 at 01:03
Didn't you try changing the CSS? http://jsfiddle.net/suc5cxqr/ — Josh Crozier, Sep 24 '14 at 01:05

score 0 · Answer 1 · answered Sep 24 '14 at 01:37

0

Try this

<a href="google.com>
    <div class="imgwrap">
        <img src="" />
        <p class"imgdescription">Text</p>
    </div>
</a>

and add this to CSS:

a{
    text-decoration: none;
}

answered Sep 24 '14 at 01:37

Johan Karlsson

6,419
1
19
28

dimitry_n · Answer 2 · 2014-09-24T02:18:42.363

As @caeth posted, you can wrap your image block and the <p> element in a single <a> (anchor). I would go even further and use an advanced CSS selector for the <p> element on hover like so:

.imgwrap p
{
    position:absolute;
    margin:0; /*<p> elements get margins by default unless declared otherwise.*/
    background-color:blue;
    top:0;/*You also had right:0 and bottom:0, which was unnecessary*/
    left:0;
    color:white;
    width:260px;
    height:200px;
    visibility:hidden;
    line-height:200px;/*centering the text vertically*/
    text-align:center;/*centering the text horizontally*/
}

.imgwrap:hover p /* Selecting the <p> element when the parent element (.imgwrap) is "hovered"*/
{
    visibility:visible;
}

And your HTML will then be:

<a href="#">
  <div class="imgwrap">
    <p>Pikaboo text</p>
    <img src="http://placehold.it/260x200" width="260" height="200" />
  </div>
</a>

Take a look: http://jsfiddle.net/oL4bqm2a/

Hover image with content on it

2 Answers2