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>

Same animation is taking longer in different directions

I have an image slider, it's going to the next/previous image fine.
The problem is that when you click the previous image button, the animation takes longer than when you click in the next image button, and the animation is the same for both!Can you tell me why is this happening?
JSFIDDLE:
http://jsfiddle.net/v6d16jza/
HTML:
<div id="slider">
<div id="setas-navegacao" style="position:absolute;height:100%;width:100%;">
<i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i>
<i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i>
</div>
<div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');">
</div>
<div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');">
</div>
<div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');">
</div>
</div>
CSS:
html{
overflow: hidden;
width:100%;
}
div#slider{
position:relative;
overflow: hidden;
width: 300%;
height:300px;
}
.slide{
position:relative;
width:33.3%;
height:100%;
float:left;
background-size: cover;
-webkit-transform: translateZ(0);
-webkit-transition: margin-left 0.9s ease-out;
-moz-transition: margin-left 0.9s ease-out;
-o-transition: margin-left 0.9s ease-out;
transition: margin-left 0.9s ease-out;
}
jQuery:
$(".sprite-slider_prox").on("click", function(){
if($(".slide_ativo").next().is(".slide")){
$(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo");
}
});
$(".sprite-slider_ant").on("click", function(){
if($(".slide_ativo").prev().is(".slide")){
$(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo");
}
});

You are adding more margin than it's actually needed to shift the image to the left.
You can see what's happening with the Chrome inspector, hovering the images while they change (raising the animation time to some higher value will help you). You will notice that the delay before the slider starts moving back is spent removing the extra margin.
I recorded a video of the debugging.
If you change:
.css("margin-left", "-100%")
to:
.css("margin-left", "-33.333%")
the animation will work correctly (see the fiddle)
Also, note that I had to remove the padding and margin from html and body elements to achieve the correct shifting.

Fade effect with climb text

I need to implement fade effect with climb text on my web page.
Example: http://www.believein.co.uk/
In this example on the main page we see when we hover mouse over image then image fade and text climb from the top. All what I imagine is that:
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<img src="~/Content/Images/4.jpg"/>
</div>
</div>
</div>
$(".pageTitle2 img").fadeTo("slow", 1.0);
$(".pageTitle2 img").hover(function () {
$(this).fadeTo("slow", 0.6);
}, function () {
$(this).fadeTo("slow", 1.0);
});
Does anybody help?

You can use CSS3 transitions for this, on hover you need to affect the opacity of the overlay background and the margin of the overlay text.
For example:
div#overlay_container:hover div#background {
transition: opacity 1s ease-in-out;
opacity: 0.6;
}
The above on hover of the overlay will change the opacity to 0.6 in an "eased" fashion.
div#overlay_container:hover div#text {
transition: margin-top 2s ease-in-out, opacity 2s ease-in-out;
opacity: 1;
margin-top: 0px;
}
The above on hover of the overlay will change the opacity to 1 and the margin-top to 0.
You can see the JSFiddle here.
You may need to fall back to a Javascript based solution if you wish to cater for outdated browsers.

You could use jQuery with some mouseenter and mouseleave effects
$(function(){
$(".bg").mouseenter(function(){
$(".text").fadeIn(500);
});
$(".bg").mouseleave(function(){
$(".text").slideUp(500);
});
});
JSFIDDLE

Link: http://jsfiddle.net/FCpc8/1/
CSS
a { position: relative; display: inline-block }
a span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
background: black;
color: #fff;
opacity:0;
transition:1s;
}
a:hover span {
opacity:1;
}
HTML
<div class="row pageTitle2">
<div class="col-md-12">
<div class="row">
<div class="col-md-4 marPadReset">
<a href="#">
<span>Some Text</span>
<img src="~/Content/Images/4.jpg"/></a>
</div>
</div>
</div>
Explanation
First of all, you need to wrap the image in anchor tag and include the text you want to show on hover in a span tag. By default, the opacity of text will be 0, that is hidden. On hover (a:hover span) opacity is set to 1 - visible. and background is black hence the image behind is not visible. Transition property of css will help it move the effect smoothly.

Want to create a download button that fades to another image on hover and then to a third image on click

Please forgive me if my question is too simple. I am VERY new at this!
I'm trying to create a button for downloading a file on my site.
I want the button to change when a user hovers over it and then when they click it I want it to change to a 3rd image and start downloading the file.
Here's what I have so far (I have the 2 images fading on hover with this)...
<div id="cf">
<img class="download" src="/Images/downloading.png" alt="download3" />
<img class="bottom" src="/Images/PDownloadAllFiles2.png" alt="download2" />
<img class="top" src="http:///Images/PDownloadAllFiles1.png" alt="download1" />
</div>
<head>
<style type="text/css">
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
#cf img.download:transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}
<script type="text/javascript">
$(document).ready(function() {
$("#cf_onclick").click(function() {
$("#cf2 img.download").toggleClass("transparent");
});
});
</script>
</head>
This code only fades image 1 into image 2 when hovering over it.
what do I need to add in order for this button to change on click to the 3rd image and start downloading the file?

just add the javascript code to change the source of the image to the third image
function onButtonClick(){
document.getElementById('yourElementId').src = 'third.png';
}

#George Watson I have no idea why you have given .zip file as the source of your tag..anyways lets move
Below I have the code which will work for the background colors. Just see the output of the code and if this is the pattern which you desired then you just have to provide an image in the background of the three div's and you are done.
<html>
<head>
<title>sumitb.mdi</title>
<style>
#container{
display: block;
position: relative;
height:100px;
width: 300px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
.customButton{
display: block;
position: absolute;
height: 100%;
width: 100%;
}
#myButton1{
background-color: red;
}
#myButton2{
background-color: blue;
opacity:0;
-webkit-transition:opacity 1s linear;
}
#myButton2:hover{
opacity: 1;
}
#myButton3{
visibility: hidden;
background-color: silver;
}
</style>
<script>
function onContainerClick(){
document.getElementById('myButton3').style.visibility='visible';
}
</script>
</head>
<body>
<div id='container' onclick='onContainerClick();'>
<div id='myButton1' class='customButton'></div>
<div id='myButton2' class='customButton'></div>
<div id='myButton3' class='customButton'></div>
</div>
</body>
</html>
To provide the background image in the div do this:
#myButton1{
....
background-image:url('one.png');
...
}
Similarly do for the other two divs
That was all about the client side; after that you have to code the server side for file downloading stuff.

How to animate background image with jQuery

Hi I'm trying to animate a background image using jQuery, I tried following this tutorial here, however I've had no luck with my test page, I see the blue Facebook icon, but on mouse over it does not animate upwards to reveal the gray logo. Please help! Thanks, I'm a jQuery noob.
My test page:
http://leongaban.com/_stack/bg_animation/
The Facebook icon should animation upwards, the full image below:
My CSS
<style>
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
}
</style>
HTML
<ul id="facebook_icon">
<li><div class="box"></div></li>
</ul>
Javascript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script>
(function() {
$('#facebook_icon li')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -119px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})
})();
</script>
UPDATE: WORKING CSS 3 Solution
CSS 3
#facebook_icon li {
padding: 0;
width: 120px;
height: 119px;
list-style: none;
background: red;
background:url('img/fb_120x238.png') repeat 0 0;
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}
.box {
width: 120px;
height: 119px;
}
HTML (Added empty div box to have something to click on)
<ul id="facebook_icon">
<li><div class="box"></div></li>
</ul>

A simple solution should be using the css3 transition.
You can do something like this:
In Your CSS
#facebook_icon li{
-moz-transition: background-position 1s;
-webkit-transition: background-position 1s;
-o-transition: background-position 1s;
transition: background-position 1s;
background-position: 0 0;
}
#facebook_icon li:hover{
background-position: 0 -119px;
}

This one is thankfully pretty simple. You are animating background-position on the anchor, but the actual image is on the li.
Just change your selector in your JavaScript:
$('#facebook_icon li')
However, I'd recommend changing your markup (and accompanying CSS) so the a is inside the li instead of a child of the ul. That way your markup is valid.
Update:
Hey, so I totally agree with using CSS3. Its exactly how I would implement that. But just to close out the question: To get the bgpos plugin working with jQuery 1.8.2, change the first two lines of the backgroundPosition method to this:
if (fx.start === 0 && typeof fx.end == 'string') {
var start = $.css(fx.elem,'backgroundPosition');