CODEWITHSUNDEEP
javascriptjqueryhtmlcss
UC3D
UC3D

Reputation: 383

How do i make a slow transition for something that you cannot animate?

Video of the problem

  1. How to make a slow trasition of this (dim the images non hovered)?
  2. How to make it not break and repeat when moving mouse really fast over all the images?
$('.member>img').hover(function () {
                            $('.member>img').css('filter', ' blur(2px) grayscale(50%) brightness(80%)')
                            $(this).css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
                        }, function () {
                            $('.member>img').css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
                        });

I tried this

$('.member>img').hover(function () {
                $('.member>img').one().css('filter', ' blur(2px) grayscale(50%) brightness(80%)')
                $(this).one().css('filter', ' blur(0px) grayscale(0%) brightness(100%)');
            }, function () {

                var grayscale = 50;
                var brightness = 80;
                var blur = 0; /*figure out blur later*/

                for (brightness = 80; brightness <= 100; brightness++) {
                    setTimeout(function () {
                        $('.member>img').one().css('filter', ' blur(0px) grayscale(' + grayscale + '%) brightness(' + brightness + '%)');
                    }, 500);
                    grayscale -= 2.5;
                }
            });

But it just waits an interval before completing everything(not gradually)

Upvotes: 1

Views: 184

Answers (1)

Naveen Niraula
Naveen Niraula

Reputation: 771

EDIT : I have removed the opacity property and used ::after along with background-color: rgba() property instead. And the result is the closest I could get. See the edited code on Codepen.

Why are you trying to complicate something that can be achieved using plain css. I think this is pretty much what you were trying to do. I cannot provide you with exact working code based on the description but I hope you got the idea or the solution. And I think it is much more pretty and straight forward to use plain css solution.

Take a look at my code below.

HTML:

<div class="holder">
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
  <div class="img"><img src="https://wallpaperscraft.com/image/cat_face_glasses_thick_65455_1024x1024.jpg" alt=""></div>
</div>

CSS:

/* setting background color to make it dark */
.holder {
  background-color: #000;
  width: 615px;
  margin-left: auto;
  margin-right: auto;
}

/* frame for the image making it responsive  I guess */
.img {
  width: 150px;
  height: 150px;
  display: inline-block;
    transition: opacity .7s;

}
/* THE TRICK */
  /* dim the image container when hovered */
  .holder:hover .img  {
    opacity: 0.3;
    transition: opacity 0.7s;
  }

  /* make the currently hovered image visible */
  .holder .img:hover  {
    opacity: 1;
    cursor: pointer;
  }
/* END OF THE TRICK */

/* resize the image to fit the frame width maintaining the aspect ratio  */
.img img {
  width: 100%;
}

Upvotes: 1

Related Questions