CODEWITHSUNDEEP
javascriptjquerycsshover
Daniel
Daniel

Reputation: 1582

Darken img while exposing text on hover

Some images in my website needs to be darken when hovered, and also in the same time, to expose text that was hidden before that hover(the text will be displayed on top of the darken image).

I already implemented the img-darken part this way - http://jsfiddle.net/4Dfpm/.

What is a good way to implement the "expose text on hover(the same hover)" part? Can it be done only with CSS, or I'll need to use a script this time ?

Thanks.

** How the img-darken part already implemented:

​

a.darken {
    background: black;
}

a.darken img {
    display: block;
    transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

Upvotes: 2

Views: 5177

Answers (6)

i_like_robots
i_like_robots

Reputation: 2787

Try this http://cssdesk.com/hrKeE

.captioned {
  position:relative;
  display:inline-block;
}
  .captioned img {
    display:block;
  }
  .captioned .caption {
    position:absolute;
    top:0;
    left:0;
    display:none;
    width:100%;
    height:100%;
    color:white;
    background:rgba(0, 0, 0, .75);
  }
  .captioned:hover .caption {
    display:block;
  }

Upvotes: 0

Jai
Jai

Reputation: 74738

Check the fiddle :

http://jsfiddle.net/4Dfpm/59/

all done throught css. althought you can achieve it with jQuery too,

your html i edited little bit:

<a href="http://google.com" class="darken">
    <img src="http://callzeb.com/themes/images/JQuery_logo.png">
    <span>123</span>
</a>

and edited little bit of css too:

a.darken {
   display: inline-block;
   background: black;
   padding: 0;
   width:229px;
   height:200px;
   overflow:hidden;
   position:relative;
   text-align:center;
}

a.darken img {
   display: block;

-webkit-transition: all 0.5s linear;
   -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
     -o-transition: all 0.5s linear;
        transition: all 0.5s linear;
}

a.darken:hover img {
    opacity: 0.7;
}

a.darken:hover span{
    display:block;
    position:absolute;
    z-index:9999;
    bottom:10px;
    color:red;
    font-size:24px;        
}

span{display:none;}

Upvotes: 0

Kyle
Kyle

Reputation: 67194

If you add a span inside the anchor, give it an RGBA color of white with no alpha, then on hover change the alpha value, you'll get the effect you want with CSS alone: 

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
    <span>text</span>
</a>

Don't forget to position the span within the anchor, so that it doesn't display beneath the image.

a.darken {
    display: inline-block;
    background: black;
    padding: 0;
    position: relative;
}

a.darken span
{
    position: absolute;
    top: 10px;
    left: 10px;
    color: rgba(255, 255, 255, 0);
}

a.darken:hover span
{
    color: rgba(255, 255, 255, 1); 
}

​http://jsfiddle.net/Kyle_Sevenoaks/4Dfpm/57/

Upvotes: 0

phemt.latd
phemt.latd

Reputation: 1803

Use a script to do that

HTML:

<div class="hoverText">Some text</div>

Js:

$("img").hover(
  function () {
    $(".hoverText").show();
  }, 
  function () {
    $(".hoverText").hide();
  }
);​

Css:

 div.hoverText{display = none;}

This a fiddle:

http://jsfiddle.net/HFgGx/

Adjust this mockup with your logic ;)

Upvotes: 0

Navi Sharma
Navi Sharma

Reputation: 256

CSS Solution

Worked on your jsfiddle and changed jsfiddle is http://jsfiddle.net/4Dfpm/55/

I have added < span > inside < a > tag with class=darken

<span>text</span>

And updated css is

a.darken{
...;
position:relative;
...
}

new css added is

a.darken span{position:absolute;top:5px;color:#000;left:10px}
a.darken:hover span{color:#fff;
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
        -ms-transition: all 0.5s linear;
         -o-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

Upvotes: 9

Jamiec
Jamiec

Reputation: 136104

Obvious jQuery solution: Add the message in the markup:

<a href="http://google.com" class="darken">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
    <span class="message">Some message here</span>
</a>

Add some css:

a.darken span{
    display:none;
    position:absolute;
    top:0px; left:0px;
    float:left;
    color:white
}

Sprinkle of JQuery:

$('.darken').hover(
    function(){
       $(this).find('.message').fadeIn(1000);
    },
    function(){
       $(this).find('.message').fadeOut(1000);
    }
    );

Et Voila: http://jsfiddle.net/4Dfpm/56/

Upvotes: 0

Related Questions