Develop Reference

Image jumps when click on next or previous on bootstrap carousel

I am working on a site and integrated the bootstrap carousel. Everything is working well, except for a one thing that: When I click on next or previous icon, images will jump a little bit and I feel very annoying about it. I tried every solutions which I have searched and applied but it still didn't work.
Can anybody help me with this problem, the url as below:
https://test5.extensionesdepelobaratas.net/hair-blog/
You will see the first carousel which have number from 1 to 8.
Look forward to hearing solutions from everybody.
Thank you very much.

It looks like there are a handful of elements with the class .item which are not properly being transitioned when it comes to it's attributes and the active class ones which are being applied thereafter.
If you add the following CSS to your .carousel-inner .item elements, all of the values will be transitioned properly.
.carousel-inner .item { transition: all 0.5s ease !important; }
Tested this with the existing website and there is no more 'jumpiness' when it comes to the elements sliding in. Instead, they grow rather than jump to the size which the carousel is setting them as.

Proper way of fading in/out an image when hovering an element

I'm doing some tests with the animeJS animation library (www.animejs.com) and I'd like to use it for changing an image for another when the user moves the mouse over some div elements in the page. Also, I'd like to swap the images with a nice fade-out/fade-in effect. You can see an example in this fiddle: https://jsfiddle.net/n5c5rgjo/3/
If you try it, you'll see that it works fine until you move the mouse from one div to the other while the animation is being played. To avoid a flickering effect in this case, I added a 'lock' (animLock variable in the code) to allow only one animation at a time. This creates another problem, because the image is not updated properly.
Could someone show me a better way of dealing with this problem? Thanks!

Ad this CSS
img{
transition: all 0.8s;
}
img:hover{
opacity:0.1;
transition: all 0.8s;
}

How can I make jquery.css not animate and instead do the changes instantly?

Everything below is tested in Chrome, on OSX.
Take a look at the main image at this website I'm building: http://www.appsbayou.se
As you can see when you load the page, the image looks like it's "sliding" to it's correct position. I don't want this behaviour.
The code behind this page is from a custom wordpress theme and in this matter I have no say. My only job is to "fix the image so it doesn't do an animation".
In the source code I've found that these lines are the culprit:
$(this).css("width", new_img_width);
$(this).css("max-width", new_img_width);
where $(this) refers to the <img> tag. There is no .animate() here. Then why is a simple changing of width/maxwidth with jQuery doing so with an animation and how can I make those lines instant instead?

remove
img {
transition: width 0.5s ease-in-out 0s,
left 0.7s ease-in-out 0s,
right 0.7s ease-in-out 0s;
}
from
http://www.appsbayou.se/wp-content/themes/customizr/inc/assets/css/orange.min.css?ver=3.1.24
at line 15

If you do an "Inspect Element" on the image, you'll see it is contained in a set of divs that employ a carousel scheme. There are several things you can do. One is to edit the page HTML and get rid of the container divs. That may have some unwanted side effects though with respect to formatting.
Another option may be to iterate up the parent chain of $(this) and start selectively removing classes from containing divs. For example get rid of the center-slides-enabled class and see what happens. Without knowing more about the structure of the carousel (you're using minified Javascript wrappers so it's sort of hard to know what's going on) I can't say exactly what the right class to get rid of is, but with some trial-and-error I think you should be able to figure out pretty rapidly what you need to do.

CSS jQuery hoverZoom Hover effect, different results on page load

I've created a plant database, the client wanted a small image of each plant, that grows in size when you hover over it. I found a jQuery that seemed to work from here: https://github.com/jmar/jquery-hoverZoom
The first time a page loads and you hover over the image, the image isn't centered in the grey box (it's shifted down). Any time after the first time you hover over the image, it is centered in the box. I can't figure out why this is only happening the first time you load the page. I have a "test" page which works fine. The thumbnail image of the plant also shifts position on the page after the first time you hover over it.
I don't know much about the jQuery, so if that's causing the problem I'm not sure how to fix it. I suspect there's some conflicting CSS, but can't find it.
NOT WORKING: http://briggs.honeycombsites.com/plants/product-search/ (NOTE: Click on any of the plants here to take you to the plant page where the hover is set up)
TEST PAGE: http://briggs.honeycombsites.com/test/ (works fine the first time)
ALSO - This doesn't seem to work in Chrome, or Safari :( Once you hover over the image the first time, the thumbnail disappears entirely.

You can apply the scale to the elements on roll over following the basic syntax of this:
CSS
.yourClass {
transform: scale(1, 1);
transition: all .5s ease-in-out;
}
.yourClass:hover {
transform: scale(3, 3);
}
If you have the element within a div I believe you will have to apply it similarly to the parent div. Also, for cross browser functionality, be sure to use the vendor prefixes on both the transition and the transform:
-webkit-
-moz-
-o-
-ms-

There seems to be a conflict between your main style.css ul and li styles and the zoom's style. Try placing jquery.hoverZoom.css last, before </head> and see if the placement of the thumb is correct afterwards.

How can I make a blank area clickable to reveal text?

I have been racking my brain over this for hours and scoured the net with no solutions. I have a particular area of an image that I want, when the user rolls over it, to have some text to appear where the user rolled over.
I may be going about this all wrong, I don't know. I currently have a large image with five image mapped hot spots on it. In each spot, when a user rolls over the area, I want text related to what that area is to appear over the hot spot. At that point, the hot spot and text should be clickable to take the user to a specific page.
I have tried having the text hidden, then to appear when rolled over. But you can't roll over hidden text. I have tried to remedy that by allowing the div to be rolled over and the text appear at that point, but I couldn't get that to work either. I would like a CSS solution, but I'm not against using JQuery or JavaScript. Thanks for any help that can be given.
Update - I have the script working now. Thanks CuriousSloth for what you put up on JSFiddle. It took me a little while to incorporate it into what I had, but it worked. Anyone can go and view what I was talking about on the homepage of my Portfolio site: http://www.taranwilson.com
Thanks again for all the help guys.

CSS
.area {
opacity: 0;
}
.area:hover {
opacity: 1;
transition: opacity 0.5s ease-in-out;
}
Without JS: http://jsfiddle.net/pAmm4/1/
If you need a particular area to be clickable, not hover, you can use either JavaScript or :active pseudo-class in CSS.

Ideally you have different hotspot divs of a certain class and different ids.
When you hover over the hotSpot class, keep track of what id you hovered over and then reveal a div corresponding to that id. That div contains your clickable element.
Here's a live code sample of how you might do this-->https://sudonow.com/session/525cb5dc35e089113700000d.
I'm available over chat/live code editing to walk you through it.