CSS Image Hover effect: Grey to Color.

Link to the site: http://www.jeremyholmesstudio.com/

What I like about this website is its design on image thumbnails. As you can see from the screenshots below, these grey thumbnails turn into color when you move the mouse over the image. I like this effect because it creates a sense of movement as if the users are “revitalizing” the image.

Screen Shot 2013-10-30 at 1.39.36 PM

(When you move the mouse over the image…)

Screen Shot 2013-10-30 at 1.39.50 PM

I looked into the website’s HTML, and found out it actually used javascript as listed in its <head> section. I would assume it helps the hover effect. The “id” for black and white images are “project_thumb”. and for the original color image the “id” is “cardthumb.”

<script type=”text/javascript”>
$(document).ready(function(){
createHover();
});
function createHover() {
$(“.project_thumb”).unbind(‘mouseenter’).unbind(‘mouseleave’); // reset the hover to prevent doubling
$(“.project_thumb”).bind(“mouseenter”,function() { // create hover
$(“img”, this).fadeTo(10, .1); // Sets the opacity to 70% on hover
}).bind(“mouseleave”,function(){
$(“img”, this).fadeTo(10, 1.0); // Sets the opacity back to 100% on mouseout
});

</script>

 

The actual HTML for the black and white image contains this part that is related to the hover effect:

<div id=”item_3627254″ name=”3627254″ page=”1″ spot=”-1″>

<div id=”pr_contain_item_3627254″>

<a href=”/The-Green-Guide-for-Horse-Owners-and-Riders” onmouseover=”this.className=’hover’;” onmouseout=”this.className=’nohover’;” id=”p3627254″ rel=”history” name=”jeremyholmesstudio” onfocus=”this.blur()”>

<div class=”loader_holder” id=”load_3627254″>

<img src=”/_gfx/loadingAnim.gif” style=”opacity: 1;”>

</div>

<div class=”cardimgcrop notitle_notag” id=”cardthumb_3627254″ name=””>

<img src=”http://payload66.cargocollective.com/1/5/190228/3627254/prt_184x184_1344956617.jpg&#8221; border=”0″ rel=”testprt_1344956617.jpg” style=”opacity: 1;”>

</div>

</a>

</div></div>

 

 

And in the CSS stylesheet, “project_thumb”, “cropimgcrop” and “cardthumb” are defined:

 

 

.project_thumb {
    float: left;
    margin: -5px 0px 32px 31px;
    padding: 0px 0px 0px 0px;
    position: relative;
    text-align: left;
}

.project_thumb .hover {
    cursor: pointer;
    text-decoration: none;
}

.project_thumb .nohover {
    text-decoration: none;
}

.project_thumb:hover .cardimgcrop img {
    opacity: 0;
    filter: alpha(opacity=0);
}

.cardimgcrop img {
    opacity: 1;
    filter: alpha(opacity=100);

    -webkit-transition: opacity .5s ease-in-out;
    -moz-transition: opacity .5s ease-in-out;
    -o-transition: opacity .5s ease-in-out;
    -ms-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;
}

.project_thumb .hover .thumb_title span {
    text-decoration: none;
}

.project_thumb .cardimgcrop:active {
    margin: 0px 0px 0px 0px;
    border:0px solid #ffffff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
}

.project_thumb.active .cardimgcrop {
    border: 0px solid #2d86ff;
    -moz-box-shadow: 0px 0px 0px #888888;
    -webkit-box-shadow: 0px 0px 0px #888888;
    box-shadow: 0px 0px 0px #888888;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

.project_thumb.active .thumb_title span {
    text-decoration: none;
}

.cardimgcrop {
    background: #ffffff;
    border: 0px solid #ffffff;
    margin: 0px 0px 0px 0px;
    padding: 0 0 0 0px;
    position: relative;
    min-width: 184px;
    min-height: 134px;
}

.cardimgcrop.notitle_notag {
    margin-bottom: 0px;
}
#cardthumb_3627254 {
    background-image: url(https://dl.dropbox.com/u/13148572/JHStudio_Web/btn/projects/horsecolor_btn.jpg); 
margin: 0 0px 0 0px;}

The coding is quite complicated as the designer created different parts of image using photoshop. So it’s important to have everything sorted out in mind and create correct <div> to arrange them, and matching CSS to define the effect.

Advertisements

2 responses to “CSS Image Hover effect: Grey to Color.

  1. This is absolutely awesome! I was trying to put this technique into my website but failed… and I had no idea why. And I definitely think it’s the javascript making the effects.

  2. This is nice! It seems fairly simple, and makes the page interactive without making it too busy. Actually it serves to highlight specific images by making them colorful compared to the others, which I think is great for both aesthetics and usability.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s