Image Hover Jquery Effect

Hovering effect on image in jQuery/javascript

. is missing in your element selection and you can use mouseover and mouseout.

$('.imageCS').mouseover(function(){    $(this).css('opacity','.2');    }).mouseout(function(){    $(this).css('opacity','1');   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><img src="http://placehold.it/350x150" class="imageCS"/>

Hover effect on images (jquery/javascript)

You could possibly do this using jQuery Accordion.

jQuery, image changing on hover

You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:

<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />

And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:

var sourceSwap = function () {
    var $this = $(this);
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource);
}

And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:

$(function () {
    $('img.xyz').hover(sourceSwap, sourceSwap);
});

Here's a working example (version 1):

var sourceSwap = function () {        var $this = $(this);        var newSource = $this.data('alt-src');        $this.data('alt-src', $this.attr('src'));        $this.attr('src', newSource);    }
    $(function () {        $('img.xyz').hover(sourceSwap, sourceSwap);    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /><br/><img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" /><br/><img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />

JQuery effect on image and label on hover

This is the best you can do with CSS, but it includes reformatting of your initial HTML code. Here is the start:

HTML:

<div style="height:400px; width:600px" class="container">
        <div class="row">
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2">Sky</label>   
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/aviation.png" width="80" height="80" class="jumper" />
            </div>
            <div class="col-xs-4 col-xs-offset-2">
                <label class="col-xs-4 col-xs-offset-2" style="height:100px;">Planet</label>
            </div>
            <div class="col-xs-4 col-xs-offset-2">
              <img src="~/images/international.png" width="80" height="80" class="jumper" />
            </div>
      <div>
</div>

CSS:

.container > div > div:first-child:hover + div {
    transform: scale(1.5);
}
.container > div > div:nth-child(3):hover + div {
    transform: scale(1.5);
}

From there you can start with your CSS and Bootstrap classes.
Now, I do know this is a bad solution and it is targeting divs only, but that is the most you can do with adjacent selectors. I can also post the simple JavaScript and/or jQuery solution...

Now, you could get the elements by the alt and src and alt should be unique. src already is:

img[src=""] 
img[alt=""]

How to create an image hover fade effect with jQuery and CSS?

From what you've described you might not even need JS to do this:

.container {  position: relative;  display: inline-block;  box-sizing: border-box;  border: 1px solid black;  cursor: pointer;  overflow: hidden;  background: #ccc;  height: 150px;  width: 150px;}
.container:hover .logo--static-state {  opacity: 0;}
.container:hover .logo--hover-state {  opacity: 1;}
.logo {  position: absolute;  transition: opacity 300ms ease-in-out;}
.logo--static-state {  z-index: 9999;}
.logo--hover-state {  opacity: 0;  z-index: 9998;}

<div class="container">  <img class="logo logo--static-state" src="http://placehold.it/150x150?text=Static" height=150 width=150>  <img class="logo logo--hover-state" src="http://placehold.it/150x150?text=Hovered" height=150 width=150></div>

How to swap images on hover using Jquery and .fadeIn effect?

Unless you use an image preloader you will run into problems with loading when changing the src.

Better to load all images (note the display:none; on the top image).

Then use the jQuery toggle() and fadeIn() fadeOut() functions.

If you don't want the white flash at the start of hover (which is the same as the link you posted) then you can remove the toggle() statements.

$(".item").hover(  function() {    // fade in    $(this).find('.bottom-image').toggle(0);    $(this).find('.top-image').fadeIn(500);  }, function() {    //fade out    $(this).find('.bottom-image').toggle(0);    $(this).find('.top-image').fadeOut(500);  });

.bottom-image,.top-image {  position: absolute;}
.bottom-image {  background-color: #777;}.top-image {  display: none;  background-color: #33a;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="link.html" class="item">  <img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300" class="bottom-image">  <img src="images/cool_restaurant.jpg" alt="Cool Restaurant" width="200" height="300" class="top-image"></a>

JQuery - replace image on hover

I would say, use data-* attributes in a better way. I would suggest you to have something like this:

<img src="img.png" data-src="img.png" data-hover="img.gif" alt="" class="image-container" />

And in the jQuery:

$(".image-container").mouseover(function () {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function () {
  $(this).attr('src', $(this).data("src"));
});

Or in short, you can also use .replace(). You don't need regex for this simple replacement:

$(".image-container").mouseover(function (e) {    
    $(this).attr("src", $(this).attr("src").replace(".png", ".gif"));
}).mouseout(function (e) {
    $(this).attr("src", $(this).attr("src").replace(".gif", ".png"));
});