Change text opacity when hovering a image

Question

Hi I want to change the text opacity when hovering a image. I tried to use this but it doesn't work:

HTML:

<div class="text">
        SOME TEXT
    </div>

<img src="image1.jpg" class="first-image">

CSS:

.text {
opacity: 0;
}

.first-image:hover {
text.opacity: 1;
}

Is there any reason preventing you from changing the HTML markup? You'll need to change the markup to do this with only CSS. — hopkins-matt, Sep 25 '15 at 17:59
@hopkins-matt What changes should I do?( I can use JavaScript or whatever, not only CSS). — Facundo Schiavoni, Sep 25 '15 at 18:05

score 1 · Answer 1 · answered Sep 25 '15 at 18:21

If you want to do it the way you was doing it with pure CSS, revised snippet below:

<dic class="first-image">
 <img src="image1.jpg" alt="first-image"/>
 <div class="text">SOME TEXT</div>
</div>

..

.text {
   opacity: 0;
  }

  .first-image:hover > div{
     opacity: 1;
   }

amespower · Answer 2 · 2015-09-25T18:31:26.940

0

In jquery, grab the class of the image, and on hover, change the opacity of the text class to 1.

 $('.first-image').hover(function(){
  $('.text').css('opacity', '1');
 });

edited Sep 25 '15 at 18:31

answered Sep 25 '15 at 18:13

amespower

score 0 · Answer 3 · answered Sep 25 '15 at 18:15

Use jQuery to listen for a mouseenter event on the image. When that event is fired, add a class (like active) to the <div class="text"> element so it would look like <div class="text active">. On the exit of the mousenter event (mouseleave), make sure to remove the active class. OR you can modify the css through jQuery directly.
Add css to change the text opacity:
.text.active { opacity: 0.5; }

3 Answers3