How is this done?

Question

I would like to emulate some things from this website - http://worldwildlife.org/species

When I mouse over an animal photo it gets a very cool overlay. Is that just a regular HOVER or is something more to it? Somehow it looks a bit fancy and animated to me, so I was wondering it is a jQuery effect instead. Is one better than the other in anyway? Sorry if the questions are silly, just don't have much knowledge in this part.

What is the best way to deal with hover-type of effects when making a mobile version?

Thanks so much!

At Stack Overflow, it is our sole purpose to help you as much as possible. However, this site is for help with trying to fix your code, not giving you code. If you want people to help you, then it would be appreciated to have some evidence of research — Cody Guldner, Jun 22 '13 at 16:24

score 1 · Answer 1 · answered Jun 22 '13 at 02:54

1

That can be done using just CSS, or you can use jQuery for more fancy effects. But the CSS transitions and animations are pretty good, and can accomplish alot as well without the need for javascript at all.

answered Jun 22 '13 at 02:54

Kylie

11,421
11
47
78

Thank you for taking time and looking into my question. – hanazair Jun 22 '13 at 13:56

score 1 · Accepted Answer · edited May 23 '17 at 11:50

As Kyle said, there are many ways to go about this task. The easiest (and most browser-compliant) way would probably be to do a simple jQuery hover effect- when the image is hovered over, another image appears and fades on top of it. The second image, of course, is most likely a transparent PNG, which makes it look like the original image is morphing.

There are many implementations of this in jQuery- doing a quick Google search yields several results. Here are a few SO posts, for example:

Edit #2

Whoops, I posted links for swapping and not overlays. Overlays are also fairly simple to do, here's a link for those:

JQuery mouseover image overlay

Edit

This StackOverflow answer uses CSS3 instead of jQuery. However, as a commenter noted, depending on your requirements this may not be functional for the browsers you need to support.

In regards to your second question, regarding the mobile environment- I would recommend leaving out the hover effects for any mobile versions of your site. That way, you're focusing on delivering the just the content, which is much more important than UI effects on mobile devices. If you want to still have some effect though, you could detect iOS/Android/WP8/etc user agents and have the hover effect instead be the a:active effect for the image links.

the links of the answers you provided give details of fading and image swapping, but not of overlays, is that what you intended? — Raj Nathani, Jun 22 '13 at 04:49
Thank you so much! This is very helpful. Would it be a good approach to use CSS3 and have jQuery as a fallback for browsers that don't support CSS3 will I just over-complicate things unnecessary? — hanazair, Jun 22 '13 at 13:55
There are a couple of options: if you are content with just supporting most modern browsers, you *could* just write a CSS3 version. However, if you need to support older browsers, etc, there are tools like Modernizr that can assist you with feature detection and writing CSS and jQuery that works with every browser. On the other hand, if you want to make the quickest approach that works in most browsers, jQuery is probably the way to go. — element119, Jun 22 '13 at 15:07

score 0 · Answer 3 · answered Jun 22 '13 at 05:16

As pointed out by the others, jQuery can be used to achieve what you would like to achieve here.
In case you are looking for CSS only solution without typing any javascript however at the cost of excluding support for older browsers, here is a solution: http://jsfiddle.net/JtKR5/5/

#img-holder{
    position:relative;
    display:inline-block;

}

#img-holder:hover:after {
    font-family:verdana;
    content:"Overlay Content";
    color:white;
    background-color:rgba(0,0,0,0.5);
    top:0;
    left:0;
    position:absolute;
    box-sizing:border-box;
    padding-top:150px;
    text-align:center;
    width:100%;
    height:100%;
    -webkit-animation:trans 300ms;
    transition:trans 300ms;
}

@-webkit-keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

@keyframes trans {
    from { opacity:0}
    to {opacity: 1} 
}

To answer your second question about mobile usage, given that these transitions are hover based, there are a few options which you have:

As autibyte pointed out you can use :active however the issue here is that once the user clicks on the image and lifts his/her fingers off the :active pseudo selector will be deactivated, there transition and everything will thus happen as long as the image is clicked on, which is generally a fraction of a second
Use jQuery to capture clicks, and accordingly toggle on/off the overlay
Detect a mobile user, and push the information which would be given to the user by hover to somewhere below/around the image, therefore removing the need for hovering/clicking.

How is this done?

3 Answers3

Edit #2

Edit