Элемент не должен исчезать, но равен

Question

Как и в названии, у меня есть элемент, который не должен исчезать, но есть. Этот элемент представляет собой текст поверх изображения, которое исчезает, когда вы наводите на него мышь.

HTML:

<div id="image-wrapper"> 
<ul id="team-members"> 
    <li class="tile-wrapper fade"> 
     <div class="tile"> 
      <img src="http://placehold.it/158x210" /> 
      <h3 class="bio bio-header" style="display:none;">Header</h3> 
      <p class="bio bio-footer" style="display:none;">Information</p> 
     </div> 
    </li> 
</ul> 

JQuery

$(document).ready(function() { 
$('.fade').mouseenter(function (ev) { 
    $(this).fadeTo(150, 0.5); 
    $(this).find('img').siblings().fadeIn(150); 
}).mouseleave(function() { 
    $(this).fadeTo(150, 1); 
    $(this).find('img').siblings().fadeOut(150); 
}); 
}); 

Fiddle: https://jsfiddle.net/oLckb6h3/4/

Answer 1

Предложение:

HTML

<div id="image-wrapper" > 
    <ul id="team-members"> 
     <li class="tile-wrapper fade"> 
      <div class="tile"> 
       <div class="doFade">&nbsp;</div> 
       <div class="info"> 
        <h3 class="bio bio-header">Header</h3> 
        <p class="bio bio-footer">Information</p> 
       </div> 
       <img src="http://placehold.it/158x210"/> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

ul { 
    list-style-type:none; 
} 

.bio { 
    padding:15px; 
} 

.tile { 
    width:158px; 
    height:210px; 
    border: 1px solid black; 
    position: relative; 
} 

.doFade { 
    position: absolute; 
    left: 0; 
    background: #fff; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    opacity: 0.5; 
    display: none; 
} 

.info { 
    position: absolute; 
    left: 0; 
    background: transparent; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    display: none; 
} 

JQuery

$(document).ready(function() { 
    $('.fade').mouseenter(function(ev) { 
     $('.doFade', this).add($('.info', this)).fadeIn(150); 
    }).mouseleave(function() { 
     $('.doFade', this).add($('.info', this)).fadeOut(150); 
    }); 
}); 

DEMO

Answer 2

размытый img, а не .fade элемент ...

$(document).ready(function() { 
 
    $('.fade').mouseenter(function(ev) { 
 
     $(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150); 
 
    }).mouseleave(function() { 
 
     $(this).find('img').fadeTo(150, 1).siblings().fadeOut(150); 
 
    }); 
 
});

ul { 
 
    list-style-type:none; 
 
} 
 

 
.bio { 
 
    padding:15px; 
 
} 
 

 
.bio-header { 
 
    margin-top:-150px; 
 
} 
 

 
.tile { 
 
    width:158px; 
 
    height:210px; 
 
    border: 1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="image-wrapper" > 
 
    <ul id="team-members"> 
 
     <li class="tile-wrapper fade"> 
 
      <div class="tile"> 
 
       <img src="http://placehold.it/158x210"/> 
 
       <h3 class="bio bio-header" style="display:none;">Header</h3> 
 
       <p class="bio bio-footer" style="display:none;">Information</p> 
 
      </div> 
 
     </li> 
 
    </ul> 
 
</div>