Develop Reference

how do you rotate an image at a 40degree angle from left to right?

I am trying with jQuery or js to get an image rotate left to right constantly after upload (no button).

Try this hope it will be helpful.
const img = document.getElementsByTagName("img")[0]
img.addEventListener("load", function(){
img.classList.remove('rotateRight');
img.classList.add('rotateLeft');
});
img{
heigth :200px;
width : 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ;
}
.rotateRight{
transform: rotate(-40deg);
}
.rotateLeft{
transform: rotate(40deg);
}
<div>
<img class ="rotateRight" src='https://www.w3schools.com/w3css/img_fjords.jpg'/>
</div>

Background slideshow- make pause between fadein/out?

I have a working background slideshow, but the images immidiately begin to fadeout after the fadein effect is complete. I want there to be a gap inbetween pictures where they are not fading in or out. Here's my code:
The html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="slideshow">
<div id="slideshow"></div>
</div>
The css:
.slideshow {
background: #000;
display:block;
width:inherit;
height:inherit;
}
#slideshow {
width: 100%;
height: 100%;
display: block;
opacity: 0.0;
background-color: #000;
background-image: url("http://lorempixel.com/400/400/cats/?1"),
url("http://lorempixel.com/400/400/animals/?2"),
url("http://lorempixel.com/400/400/nature/?3"),
url("http://lorempixel.com/400/400/technics/?4"),
url("http://lorempixel.com/400/400/city/?5");
background-size: cover, 0px, 0px, 0px;
-webkit-transition: background-image 3000ms linear;
-moz-transition: background-image 3000ms linear;
-ms-transition: background-image 3000ms linear;
-o-transition: background-image 3000ms linear;
transition: background-image 3000ms linear;
}
Here's my js:
$(function() {
$.fx.interval = -6000;
(function cycleBgImage(elem, bgimg) {
elem.css("backgroundImage", bgimg).delay(1000, "fx")
.fadeTo(3000, 1, "linear", function() {
$(this).fadeTo(3000, 0, "linear", function() {
var img = $(this).css("backgroundImage").split(","),
bgimg = img.concat(img[0]).splice(1).join(",");
cycleBgImage(elem, bgimg);
});
});
}($("#slideshow")));
});
Any help with making a stoptime between images would be appreciated. Thanks

Change your delay : elem.css("backgroundImage", bgimg).delay(1000, "fx")
Example; change 1000 in 3000 then the image will stay for 3 seconds

Fade one image into another using css or jquery

I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.

Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-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;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
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;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-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.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo

css3 transitionend doesn't fire on firefox

Please look at the next fiddle and help me understand why in Firefox, the alerts aren't fired.
HTML
<div class="test1">TEST1</div>
CSS
.test1 {
opacity: 0;
width: 300px;
height: 150px;
background-color: blue;
transition: opacity 0.2s 0 ease-in;
&.fade-in {
opacity: 1
}
}
JS
$(".test1").ready(function(){
$(".test1").one("webkitTransitionEnd transitionend MSTransitionEnd oTransitionEnd transitionEnd", function(event){
alert("transition fired");
if ( event.target == event.currentTarget ) {
alert(event.target);
}
});
setTimeout(function(){
$(".test1").addClass("fade-in");
},1000);
});
Updated code and fiddle

add -moz- at defor of animation property
-moz-transition: PROPERTY or CSS CLASS NAME .3s ease;
example:
-moz-transition: width .3s ease;
-moz-transition: fade-out .3s ease;

How do I change the opacity of an image?

<script type="text/javascript">
$(document).ready(function(){
$('#logo').mouseenter(function() {
$('#logo').fadeTo("fast",0.3);
});
$('#logo').mouseleave(function() {
$('#logo').fadeTo("fast",1)
});
});
</script>
I made this to change the opacity of an image while hovering over it with the cursor, but this doesn't happen. :(

You don't need jQuery for that, you can use CSS:
Example HTML - you need it to have the ID logo.
<img id="logo" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Example.svg/200px-Example.svg.png" />
CSS
#logo {
opacity: 1;
filter:alpha(opacity=100);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
#logo:hover {
opacity: 0.3;
filter:alpha(opacity=30);
transition: opacity 0.2s linear 0s;
-webkit-transition: opacity 0.2s linear 0s;
}
http://jsfiddle.net/pFEdL/2/

What does you HTML look like for your image? Is it embedded in other divs?
SO: Jquery mouseenter() vs mouseover()
As gilly3 states in the question above, "Each time your mouse enters or leaves a child element, mouseover is triggered, but not mouseenter".