CODEWITHSUNDEEP
jqueryhtmlcsshover
user2218856
user2218856

Reputation: 117

Hover effect on images (jquery/javascript)

Im want a similar hover effect as the images on the front page of this website: http://www.arken.dk/default.aspx I have made the html and css with hover effect but since the hover class only apply to one image at a time, the change in position will only be for one image at a time. As far as I can see, I will need some script to change the css of all the images whenever just one image is hovered. Also, it should not only be a hover effect. On the website the position of the images remains the same even after the image is no longer hovered?

Any one know how to do this or maybe have a link to a tutorial etc?

Im not sure what this effect is called so I havent been able to find anything useful on google :(

Thanks in advance :)

Upvotes: 0

Views: 2850

Answers (4)

Sirushti
Sirushti

Reputation: 23

Working Example : http://jsfiddle.net/SBpzX/2/

<div id="container">  
    <div class="text">one</div>
</div>

js

$(document).ready(function() {
    $('.text').hide();
    $('img').animate({
        opacity:1

    });

    $('img').hover(function() {
        $(this).stop().animate({opacity:.4},200);
        $('.text').fadeIn();

    }, function() {
        $(this).stop().animate({opacity:1},500)
        $('.text').fadeOut();
    });


});

css

img
{    
    position:absolute;
    left:0;
    top:0;
}

#container {
    width: 400px;
    height: 267px;
}

.text {
    color: black;
    position: relative;
    text-align: center;
    top: 50%;
    font-family: Arial, Verdana;
    color: #000;
    font-size: 5em;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
}

Upvotes: 1

PraJen
PraJen

Reputation: 606

Download jquery and use it...

$(#'image need to be hovered').mouseover(function()
{
  $(#'images need be be cahnged in this effect').attr('src','image path')
})

For example: Give id for div as img1 and images need to be changed is img1,img2,img3

Consider this

$('#img1').mouseover(function()
    {
      $('#img1').attr('src','image path for hover image');
      $('#img2').attr('src','image path for hover image');
      $('#img3').attr('src','image path for hover image');
    });

and in mouseout 

 $('#img1').mouseout(function()
        {
          $('#img1').attr('src','image path for original image');
          $('#img2').attr('src','image path for original image');
          $('#img3').attr('src','image path for original image');
        });

Upvotes: 0

Niklas
Niklas

Reputation: 1777

You could possibly do this using jQuery Accordion.

Upvotes: 0

Martin D
Martin D

Reputation: 697

For instance one component from YUI library: http://yuilibrary.com/gallery/show/accordion-horiz-vert

Upvotes: 0

Related Questions