悬停淡入淡出不适用于石工CSS

Question

I am working on my portfolio site, and on the works page, I have a pinterest-like masonry layout with images of some of my work. On hover of the images I am using css to show a caption box and this works as expected. However, I want the image to fade without the caption box failing and when I add the hover fade on the image whether it be via CSS or javascript/jquery it only works properly on the first row of images. or rather it works properly on all rows but it breaks the caption box on any row aside from the first. It definitely seems to be something due to the rows I am using because if I change the css to only have one row it works as expected.

Here is the code of one of the image panels:

<div class="panel panel-primary work-panel image text-center">
  <script id="metamorph-29-end" type="text/x-placeholder"></script>
    <div class="panel-image hide-panel-body hide-panel-footer">
  <div class="img-wrap">
      <img src="./imgs/abstract-realism.jpg" data-bindattr-1="1" class="panel-image-preview">
  <div class="img-overlay">
  <h4><script id="metamorph-30-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-30-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-31-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-31-end" type="text/x-placeholder"></script></p>
  </div>
  </div>
    </div>
    <div class="panel-body">
      <h4><script id="metamorph-32-start" type="text/x-placeholder"></script>Abstract Reality<script id="metamorph-32-end" type="text/x-placeholder"></script></h4>
      <p><script id="metamorph-33-start" type="text/x-placeholder"></script>This piece was completed during my studies at the Art Institute of Virginia Beach. The drawing was done in colored chalk and conte on paper.<script id="metamorph-33-end" type="text/x-placeholder"></script></p>
    </div>
  </div>

Here is the css controlling the caption box:

.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity = 0);
position: absolute;
width:100%;
z-index:9999;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.9;
filter: alpha(opacity = 90);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}

Here is the jquery on the ember view controlling the fade (the function starting with $('.img-wrap'):

    App.WorksfadeView = Ember.View.extend({
        didInsertElement : function(){
        Ember.run.scheduleOnce('afterRender', this, function(){
                $(function() {
                        $("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false, theme:    'dark_rounded', allow_resize: false});
                        $('.work-panel.image').on('click', function(e) {
                                var img = $(this).find('img').attr('src');
                                var name = $(this).find('h4').text();
                                var desc = $(this).find('p').text();
                                $.prettyPhoto.open(img,name,desc)
                        });
                      $('.img-wrap').hover(function(){
                                      $(this).find('img').addClass("faded");
                              }, function(){
                                      $(this).find('img').removeClass("faded");
                      });
                });
    });
  }
});

You can find the works page with just the caption (to show it works by itself) here:

http://adminref.com/#/works

and this is what happens when I add the image fade in:

http://adminref.com/#/worksfade

As you can see it works as expected on the first row but that's it. Perhaps this is an issue i need to correct on the ember.js level? I have tried adding the fade and comment box box via css both via jquery or one via jquery and the other via css and nothing works on all rows I'm stuck please help.

Answer 1

Well, if I understand well, you try to make a fade in / fade out animation on hover on your projects ?

Currently, you are adding a class that provides extra styles on hover. You'd better do that only with CSS (so it will be easier to manage than javascript events).

Example :

.panel-image img.panel-image-preview {
  width: 100%;
  border-radius: 2px 2px 0px 0px;
  transition: opacity .2s ease-in-out; /* you may use prefixes */ 
}
.panel-image:hover img.panel-image-preview {
  opacity: .5;
}
.panel-image .img-overlay {
  background-color: #000;

bottom: 0;
color: #fff;
opacity: 0;
filter: alpha(opacity = 0);
position: absolute;
width: 100%;
z-index: 9999;
  transition: opacity .2s ease-in-out; /* you may use prefixes */
}
 .panel-image:hover .img-overlay {
  opacity: 1;
}

I simply added transition on elements that will need a transition on hover and and made style modifications on hover (instead on class you added with javascript). So you'll have to remove the class toggle from your JS code .

Update : You're obviously encountering a Chrome bug. Here's a workaround :

.img-wrap {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0,0,0); /* this will do the job */
}

Note that it is just a workaround.

Still, I highly recommand to use full CSS solution : smoother, and it surely will be easier to handle and maintain it.