Opacity and Text on Image Hover (4 posts)

  1. bk12345
    Posted 2 years 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?

  2. Top Cat
    Posted 2 years 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...

  3. bk12345
    Posted 2 years 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.

  4. jgme
    Posted 2 years 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;}

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

Topic Closed

This topic has been closed to new replies.

About this Topic