Opacity and Text on Image Hover

  • bk12345

    (@bk12345)


    11 years, 7 months ago

    Hi all, I am making a couple of rows of image links and would like image to have opacity applied to it and for some text specific to that image to appear on it when the cursor is hovered over it. One idea is for the text could be taken from the image’s alt text although I don’t know how to make the text appear over the image.

    Anyone know of a plugin that does all of the above?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Top Cat

    (@top-cat)

    11 years, 7 months ago

    Looking for that sort of functionality myself.
    Seems to be a simple thing to implement, but of course, we’re all too lazy for that…

    Thread Starter bk12345

    (@bk12345)

    11 years, 7 months ago

    Setting the opacity when hovering is obviously pretty easy with CSS it’s the dislaying of text and any other elements over the image when hovering which I’m finding difficult.

    jgme

    (@jgme)

    11 years, 7 months ago

    You can use :before

    <style type="text/css">
.addFav:before {background:url(http://lorempixel.com/400/200/sports) no-repeat; height:200px; width:400px; position:absolute; content:""; opacity:1;}
.addFav:hover:before { opacity:0.2; }
.addFav { height:200px; width:400px;}
​</style>

    <div class=”addFav”>Your Text</div>

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Opacity and Text on Image Hover’ is closed to new replies.