We Keep Coding

On hover another layer move if that layer mose hover then hover stop

Hover is kind of funny as in this code a new layer .hide which get appear when hover as it transition it response differently I try diffent thing like hide:hover +img{} and other if anybody know about it please help is there is any hack in this issue.
Thing is there is two layer first layer should fade Opacity and another layer transition with animation that is only word. Which is .hide Class that but if then i hover on .hide class which transition when hover cause issue.,
Right Now i using with z index different But then Text hide behind the back of image.
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog img:hover{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog img:hover + .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>

This issue happens because you add the styles on img:hover, simply, by default, these events are triggered for the selector itself or one of its children, in this case, the image and the div.hide are siblings, to avoid this behavior you can update your code to add these styles on catalog:hover, which is a parent of both, so whenever you hover on of them, you will be hovering the parent too
.catalog {
overflow:hidden;
width:300px;
height:300px;
margin:2px;
}
.catalog:hover img{
transition: transform 500ms , opacity 500ms 0ms ease-in-out;
transform: scale(1.3);
opacity: 0.3;
}
.hide{
z-index:0;
display:block;
font-size: 10px;
position:relative;
top:-50px;
transition: font-size 500ms , top 500ms 0ms ease-in-out;
width:100%;
background: #6c6c934d;
background-size: 300px 300px;
color: #13436c;
}
.catalog:hover .hide {
font-size:50px;
top:-300px;
padding-bottom:50px;
}
<div class="flex wrap center space-around jcenter">
<div class="catalog">
<img src="https://ikrent.com/include/image/refrigerator.png" height="300px">
<label class="hide"> Refrigerator</label>
</div>
</div>

How to stop the fade in / fade out on mobile device

I have created a simple fade in and fade out. I am also trying to stop the animation process on mobile device.I am able to access below code on computer but i want to stop fadeIn and fadeOut on mobile device.
Please help me
HTML
<div id="wrap">
<img class="bgfade" src="img/background1.png">
<img class="bgfade" src="img/background2.jpg">
<img class="bgfade" src="img/background3.jpg">
</div>
css
#wrap{
position:fixed;;
z-index:-1;
top:0;
left:0;
background-color:black;
}
#wrap img.bgfade{
position:absolute;
top:0;
display:none;
width:100%;
height:100%;
z-index:-1;
background-position: center;
}
img {
transition: all .10s linear;
-webkit-transition: all .10s linear;
-moz-transition: all .10s linear;
-o-transition: all .10s linear;
}
#wrap img {
-webkit-filter: brightness(30%);
filter: brightness(40%);
}
js
$(window).load(function(){
$('img.bgfade').hide();
var dg_H = $(window).height();
var dg_W = $(window).width();
$('#wrap').css({'height':dg_H,'width':dg_W});
function anim() {
$("#wrap img.bgfade").first().appendTo('#wrap').fadeOut(2000);
$("#wrap img").first().fadeIn(2000);
setTimeout(anim, 3000);
}
anim();})
$(window).resize(function(){window.location.href=window.location.href})

Here's dirty solution but you'll get idea of what you need to do.
CodePen link
What I done is just placed some !important rules based on media query breakpoint. You try to animate your images with class, and clear out those ugly code I put there, NOTE: it's just to help you with logic.

The jQuery stop() method is used to stop animations or effects before it is finished.

css transitions not working on firefox

I have a similar issue as CSS Transition not firing when adding class to body (Firefox) but I can seem to find a way to solve it targeting the element in different ways or removing classes.
Here is what I have:
Markup:
<div class="ball b40 first">
<a class="ffx-fx" href="javascript:void(0)">
</a>
</div>
css:
.ffx-fx {
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5s ease-in-out;
transition: all 1.5s ease-in-out;
}
.b40 a {
width:220px;
height:220px;
background: url(../images/temp/1_a.jpg) center center;
background-size: 100% 100% !important;
}
.b40 .b40-rotated {
width:220px;
height:220px;
background: url(../images/temp/1_b.jpg) center center !important;
}
js:
window.setInterval(function() {
$( ".b40 .ffx-fx" ).toggleClass( "b40-rotated" );
}, 5000);

I don't believe you can switch out background-images with transitions. At least I haven't tried it. How I usually handle this situation is have two inner divs--one with the on hover class and one with the off class. Then on hover, I change opacity. Opacity transition works. Sooo something like this...
HTML
<div class="container">
<a href="">
<div class="off_state"></div>
<div class="on_state"></div>
</a>
</div>
CSS
.container{position:relative;}
.off_state, .on_state{
position:absolute;
top:0;
left:0;
transition: all 1s;
}
.off_state, .container:hover .on_state{opacity:0.0;filter:alpha(opacity=0);}
.container:hover .on_state{opacity:1.0;filter:alpha(opacity=100);}
It's a rough version, but that's how I've always done it.
NOTE: jQuery UI also has the ability to add a class slowly. You can view it here: http://jqueryui.com/addClass/. It would probably be easier to use.

Slide floated divs after hiding an element

I have a row of 4 divs that are floated left. On click, the div disappears and its siblings move to the left and take up its position. However, I'm struggling with smoothing this animation since the remaining 'divs' just jump to their new position instead of sliding over
http://jsfiddle.net/G9x8V/
Is there any way to smooth out the transition, preferably without using specific values, ie: margin-left: x pixels;? Also, is it possible to do this with css transitions?

You can switch fadeOut() with hide()
Here is the updated fiddle
$(function(){
$('.box').on('click', function(){
$(this).hide(1000);
})
});
EDIT
One of the directions is to wrap boxes into invisible divs that will hide after the boxes fade out. Here is the updated fidle
HTML
<div class="container">
<div class="outer-box">
<div class="box">1</div>
</div>
<div class="outer-box">
<div class="box">2</div>
</div>
<div class="outer-box">
<div class="box">3</div>
</div>
<div class="outer-box">
<div class="box">4</div>
</div>
</div>
CSS
.container {
width: 600px;
}
.box {
width: 100%;
height: 120px;
background: red;
float: left;
}
.outer-box {
width: 20%;
height: 120px;
margin-left: 2.5%;
float: left;
}
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(1000, function(){
$(this).parents('.outer-box').hide(1000);
});
});
});

I'd go with Bojana's answer, but I'll give you another option, as I worked a little on it(it's not done, implementation isn't as easy as bojana's):
http://jsfiddle.net/G9x8V/4/
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {margin-left: 18%;}
25% {margin-left: 12%;}
50% {margin-left: 6%;}
100% {margin-left: 0%;}
}
And then you'd have to update the javascript so it occured on click, not on page load, and you might want to put in more points on that animation and switch to px.

Is this what you are looking for? Or do you actually want the blocks to slide along?
CSS3 Ease
-webkit-transition: all 3s ease-in-out;
-moz-transition: all 3s ease-in-out;
-ms-transition: all 3s ease-in-out;
-o-transition: all 3s ease-in-out;
JSFIDDLE
jQuery
$(function(){
$('.box').on('click', function(){
$(this).fadeOut(function() {
$(this).next().animate({'left': '0px'}, 1000).next().animate({'left': '27.5%'}, 1000).next().animate({'left': '50%'}, 1000);
});
})
});
JSFIDDLE jQuery

How to darken an image on mouseover?

My problem..
I have a number of images (inside hyperlinks), and I want each to darken on mouseover (i.e. apply a black mask with high opacity or something), and then go back to normal on mouseout . But I can't figure out the best way to do it.
I've tried..
Jquery color animate and some javascript references.
Setting the opacity of the image with javascript.
I don't want..
Image start at 80% opacity then go to 100% on mouseover (that's easy).
To swap between 2 images (one light & one dark), forgot the mention this sorry..
To reiterate..
I want in image (inslide a hyperlink) to darken on mouseover and then lose its darkness on mouseout.
Thoughts?
UPDATE :
This is my progress from suggestions. Looks fine in IE8, but not in FF3
<html>
<body>
<a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>
Thoughts?
-- Lee
ANSWER
I'm going with this (seems to work in IE8 & FF)
<html>
<head>
<style type="text/css">
.outerLink
{
background-color:black;
display:block;
opacity:1;
filter:alpha(opacity=100);
width:200px;
}
img.darkableImage
{
opacity:1;
filter:alpha(opacity=100);
}
</style>
</head>
<body>
<a href="http://www.google.com" class="outerLink">
<img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200"
class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" />
</a>
</body>
</html>

Or, similar to erikkallen's idea, make the background of the A tag black, and make the image semitransparent on mouseover. That way you won't have to create additional divs.
CSS Only Fiddle (will only work in modern browsers)
JavaScript based Fiddle (will [probably] work in all common browsers)
Source for the CSS-based solution:
a.darken {
display: inline-block;
background: black;
padding: 0;
}
a.darken img {
display: block;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.7;
}
And the image:
<a href="http://google.com" class="darken">
<img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200">
</a>

Make the image 100% bright so it is clear.
And then on Img hover reduce it to whatever brightness you want.
img {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">
That will do it,
Hope that helps

I realise this is a little late but you could add the following to your code. This won't work for transparent pngs though, you'd need a cropping mask for that. Which I'm now going to see about.
outerLink {
overflow: hidden;
position: relative;
}
outerLink:hover:after {
background: #000;
content: "";
display: block;
height: 100%;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 100%;
}

How about this...
<style type="text/css">
div.frame { background-color: #000; }
img.pic:hover {
opacity: .6;
filter:alpha(opacity=60);
}
</style>
<div class="frame">
<img class="pic" src="path/to/image" />
</div>

Put a black, semitransparent, div on top of it.

Create black png with lets say 50% transparency. Overlay this on mouseover.