We Keep Coding

bxSlider background-image flickers in chrome

I have a little problem. I use bxSlider but instead of <img> I use background-image.
In chrome I see some flickering and I can't get rid of it.
Maybe someone had a similar problem, tell me please how to treat :)
Here is my code
$('.bxslider').bxSlider();
.bxslider {
margin: 0;
padding: 0;
list-style-type: none;
}
.bxslider li {
height: 400px;
background-size: cover;
background-repeat: no-repeat;
background-position: top center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<ul class="bxslider">
<li style="background-image: url(http://lorempixel.com/1920/400/sports)"></li>
<li style="background-image: url(http://lorempixel.com/1920/400/city)"></li>
</ul>
And you can also see it in JSFiddle
flicker seen in browser resolution 1700px and more

There is an option useCSS might be related to the flickers, set it to false and see.
useCSS
If true, CSS transitions will be used for horizontal and vertical
slide animations (this uses native hardware acceleration). If false,
jQuery animate() will be used.
default: true
options: boolean (true / false)

I finally figured out that. Thanks #Pangloss because his answer told me where to find the real problem. And the real problem is -webkit-perspective because bxSlider uses transform: translate3d(). About -webkit-perspective you can read here CSS-Tricks, here and MDN.
In this particular situation my solution is -webkit-perspective: 1000px;. No flickers and we'll stay with CSS transforms without JS :)

Adding / removing class from only visible <img> tags

EDIT: the difference between the suggested duplicate thread and my thread is I'm wondering how to target only the visible img and toggle a class on and off for it.
I have an interesting situation I hope to get some help with. Before I go any further this is the site: www.travelandlifestylephotography.com
I'm using fullpage.js on that site. However I am wanting to do something that is outside the scope of that plugin so I need some help as I am just learning HTML/CSS and know almost nothing about Javascript.
This is what I want to do: I want the background image on just the active slide to go from "background-size: cover" to "background-size: contain" when the user presses the "space" key. If they press the space key again I want the image to go back to "background-size: cover". When I say "active" slide I mean that fullpage.js adds an "active" class to the "slide" class currently being viewed. I want this change to only affect the background image of the slide being viewed and not any other slide.
How things are coded:
<div class="slide loading">
<img class="lifestyle1 background_cover" />
</div>
And the CSS this way:
.lifestyle1 {
background-image: url("/img/lifestyle/1Lifestyle.jpg");
background-repeat: no-repeat;
background-position: center 30%;
width: 100%;
height: 100%;
position: relative;
top: 50%;
transform: translateY(-50%);
background-size: contain;
z-index: -1;
}
.background_cover {
background-size: cover;
}
So you can see, if I can somehow remove the "background_cover" class from just the active image the background image will revert back to having "background-size: contain".
So, that's my question. I hope it was clear and concise. :) Thanks in advance. Please let me know if you need any more information.

You can use the below function:
$(function () {
$(document).on("keyup", function (e) {
if (e.keyCode == 32) {
$(".slide.active > img").toggleClass('background_cover');
}
});
});
Bind to keyup ensures that the function will not get repeatedly called if the key is kept depressed.
.slide.active get you the currently selected slide.

Hover div change background properties

I have a div with a background image, but what I wanted is that when I hover that div, the background would turn with a filter transparent white (like 50% transparency), so we could see both the background and the image I have inside the div. I didn't want that this filter to affect the image inside it, only the background.
HTML:
<div class="col-xs-3 col-md-3 back-div">
<img src="imgs/logo.jpg">
</div>
CSS:
.back-div{
background-image: url("../imgs/imgbg.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Is there any js framework to do this with some animations also?
Thanks

This can be achieved with some simple jQuery (allowing you to reuse it on multiple elements of similar structure). *I gave you jQuery because you asked form animation as well as the hover opacity effect and jQuery alleviates the various browser incompatibilities with css animations.
jsFiddle
New JS:
$(function(){
$('.back-div').hover(function(){
$('.back-div img').animate({opacity: 0.5},1000);
}, function(){
$('.back-div img').animate({opacity: 1},1000);
});
});
New CSS:
.back-div img {
opacity: 1;
}

You could use some jQuery to modify the div.
$(".back-div").css({ 'background': 'whatever'});
You can out it inside a function and you can play with it. It will give you a more personalized functionality.
If not, try play with this too (in CSS):
opacity: 0.4;
filter: alpha(opacity=40);

You must pretend the background by another internal div
<div class="your-cont">
<div class="fake-bg"></div>
<img src="imgs/logo.jpg">
</div>
CSS:
.your-cont {
position:relative;
}
.your-cont:hover .fake-bg {
opacity:0.5;
}
.fake-bg {
position:absolute;
z-index:-1;
left:0;
top:0;
width:100%;
height:100%;
}

How do i mask images on hover?

I have 9 images aligned in 3 rows. Each row has 3 images.The images popup on hover. Except the image which popups the rest of images should be darkened. Since i have yellow background if i try to reduce opacity of the images , the images appear dim yellow . So i can't reduce opacity. Any other solution . Please help
My Sample Code
<div id="content">
<ul>
<li> <div class="imagHolder"> <img src="my-image.jpg" width="320" height="240"> </div> </li>
< /ul>
</div>
CSS
#content {
background : yellow;
width : 940px;
height : 500px;
}
Even if i set background color black to the wrapper imagHolder , the images appear dim yellow on hover
Jquery code
jQuery(document).ready(function() {
jQuery('.imagHolder').hover (function() {
jQuery('.imagHolder').css({'opacity' : '0.5'});
},
function(){
jQuery('.imagHolder').css({'opacity' : '1.0'});
}
}

You can set background-color: #000 on the image elements -- then you should be able to reduce opacity to darken the images.
As pointed out in the comments, you need to set the background color on a wrapper around the image. Here is a working example demonstrating the technique: http://jsfiddle.net/UWJhM/
The problem with the code in your example is that you're changing the opacity of the wrapper div rather than the opacity of your image. Set a black background on your image wrapper, and then change the opacity of the image only, and you should be fine.
On a side note, JavaScript isn't needed for this effect. You could substitute your jQuery code with CSS rules that change the opacity on hover, and still get the same effect. Again, see the jsfiddle mentioned above where this technique is illustrated.

Tried it the other way? Make a div block on top of the image as such:
<div class="imgHolder">
<img src "image01.jpg" width="100" height="100"/>
<div class="imgMask" ></div>
</div>
of course u have to apply correct css as such:
.imgMask {
width:100px; height:100px; position: absolute; top: 0; left: 0; background-color: #000; display: none;
}
.imgHolder {
position: relative;
}
just .show() the imgMask when necessary :)

Using JavaScript to fade a thumbnail image from grayscale to to color

I'm relatively new to Web development and wouldn't even know where to start in coding a JavaScript that fades a grayscale thumbnail image into a color thumbnail image on mouseover, and vice versa on mouseoff (<--or whatever this is called).
I've looked all over and can't find a script that does this. Is this possible? Could I use jQuery to do this? Other thoughts?

I think all you could do is load two thumbnails into a container at once, with the black and white laying over top of the colour. Then, you could use jquery to fade the opacity of the to thumbnail to 0.0. Here is a working example (it just uses a click to change it once, but I'll leave the mouseover / mouseout to you - you may want to speed up the animation):
some html:
<div class="container">
<img src="blackandwhite.jpg" class="bw" />
<img src="colour.jpg" class="colour" />
</div>
some css:
.container { position: relative; }
.container img { position: absolute; }
.bw { z-index: 101; }
.colour { z-index: 100; }
some jquery:
$(function() {
$(".bw").click(function() {
$(this).animate({ opacity: 0.0 }, 800);
});
});

The best way to do this would be to actually have two versions of the image. One that's grayscale and one that's color. To keep it strictly within javascript and html, I don't believe there's any other way than with the two image method. Flash, Silverlight, and maybe even HTML 5, can do it easily.

Do you really want to fade, or just to swap?
Typically the swap is done via CSS
<a class="btn"></a>
and the CSS
a.btn {
background: url(../images/button-image.png) no-repeat 0 0;
width: 110px;
height: 16px;
margin: 10px 0 0;
}
a.btn:hover {
background-position: 0 -16px;
}
In this case there's a little performance improvement going on where button-image contains both images vertically stacked, and the css is sliding the background image around, but it's the same idea. It's a performance enhancement because the browser only needs to download 1 image, not 2.