Opacity decrease on image hover removes links from text

Question

I am having a few issues here: one is reproducing this issue in jsfiddle as I can't seem to get the hover mouseover action working properly. The actual issue I'm having is the links in the 'field-more'link' content do not appear after jQuery tells the css to decrease the opacity on the image.

<div class="views-field views-field-field-member-image">        
    <div class="field-content">
        <div class="field-more-link" >
            <div class="field-name"><a href="/team-member/darrell-smith">Darrell Smith</a></div>
            <div class="field-position">Instrument Maker</div>
            <div class="field-general-position" style="display: none;">Associates</div>
            <div class="field-project-name"><a href="google.com/tags/project">IceCube</a></div>
            <div class="field-phone"></div>
            <div class="field-email">dsmith@whatever.edu</div>
    </div>

<div class="field-image" style="display:inline;">
    <img typeof="foaf:Image" src="http://i.imgur.com/6wGdB52.jpg" alt="Darrell Smith" ></img>
</div>

Below is what I want the overlay to look like (but the links in .field-name and .field-project-name aren't clickable e.g. "Darrell Smith" and "IceCube" should be links)

https://i.stack.imgur.com/Vmx1F.png

Here is how far I got on the jsfiddle (couldn't get the jquery to work)

http://jsfiddle.net/9d43y2tn/4/

I hope this is enough info!

duplicate? http://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8 — Abozanona, Apr 14 '15 at 21:10
here is a working fiddle with some styling: http://jsfiddle.net/9d43y2tn/9/ Answer is below. — deebs, Apr 14 '15 at 21:22
If you don't have to support pre ie-10 you can do this with css. If your interested I can add the css version as an answer. — Blue, Apr 14 '15 at 21:28

score 1 · Accepted Answer · answered Apr 14 '15 at 21:14

You need to have the links within that field-image div. Fiddle here: http://jsfiddle.net/9d43y2tn/6/

<div class="views-field views-field-field-member-image">        
    <div class="field-content">


<div class="field-image">
    <img typeof="foaf:Image" src="http://i.imgur.com/6wGdB52.jpg" alt="Darrell Smith" ></img>
    <div class="field-more-link" >
            <div class="field-name"><a href="/team-member/darrell-smith">Darrell Smith</a></div>
            <div class="field-position">Instrument Maker</div>
            <div class="field-general-position" style="display: none;">Associates</div>
            <div class="field-project-name"><a href="google.com/tags/project">IceCube</a></div>
              <div class="field-phone"></div>
              <div class="field-email">dsmith@whatever.edu</div>
    </div>
</div>

And the jQuery revised slightly:

      $('.field-image').hover(
    function () {
      $('.field-image').find('img').fadeTo(1000, .3);
      $('.field-more-link').show(1);
    },
    function () {
      $('.field-more-link').hide();
      $('.field-image').find('img').fadeTo(100, 1);
    }
  );

Great, thanks. How do I actually make it fade to black rather than white? I tried setting the image background to black. — cherner, Apr 15 '15 at 14:18
You'll need to set the background of the area the image covers (.field-image class, in this case) to black. Here is an example: http://jsfiddle.net/9d43y2tn/15/ — deebs, Apr 15 '15 at 14:21

score 1 · Answer 2 · edited Apr 14 '15 at 21:52

The real issue here is that the although it might look like the links are in front of the image once it's opacity has changed, in reality the picture is still overlapping them. This can be fixed by setting the z-index of the links to a higher number than the picture (2, for instance) but that immediately leads to another problem: When you hover over the links, the picture is no longer considered "hovered" and it fades back in.

So, I offer a very simple solution: Change what you are targeting with your jquery. Instead of altering the opacity of the image when you are hovering over the image, make the div containing your links the same size as the image behind it and cause the image opacity to change when you hover over the container div. So instead of $(.field-image), do $(.field-content).

  $('.field-content').hover(
    function () {
      $('.field-image').find('img').fadeTo(1000, .3);
      $('.field-more-link').show(1);
    },
    function () {
      $('.field-more-link').hide();
      $('.field-image').find('img').fadeTo(100, 1);
    }
  );

Here is working example

score 0 · Answer 3 · answered Apr 14 '15 at 21:11

0

try this

 $('.field-image').hover(
        function () {

          $('.field-image').find('img').fadeTo(1000, .3);
          $('.field-more-link').show(1);
        },
        function () {
          $('.field-more-link').hide();
          $('.field-image').find('img').fadeTo(100, 1);
        }
      );

answered Apr 14 '15 at 21:11

Sushil

2,837
4
21
29

this fixes the hover issue, but not the clickable links issue – deebs Apr 14 '15 at 21:17

Opacity decrease on image hover removes links from text

3 Answers3