0

Working on portfolio gallery: flowmedia.dk/new

Inactive state: Hover - inactive

Hovering over the top 2/3 of thumbnail triggers image going from grayscale to color: Hover - image only

Hovering over the bottom 1/3 of thumbnail triggers image caption.: Hover - caption only

Captions (jQuery):

jQuery(document).ready(function($) {
    $(document).ready(function(){
        $('.caption').hide();
        $('#portfolio-container .element').hover(function () {
            $('.caption', this).stop().fadeTo('slow', 1.0);
        },
        function () {
            $('.caption', this).stop().fadeTo('slow', 0); 
        });
    });
});

Grayscale (CSS):

img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
     -webkit-filter: grayscale(0%);
    ...
}

How do I trigger the captions and grayscale-to-color effect simultaneously on hover or trigger the grayscale-to-color with the captions?

(Hover anywhere on thumbnail and image will change from grayscale to color.)

Amie
  • 25
  • 1
  • 7

1 Answers1

0

This can be achieved easily with only css.

CSS

.grayscale {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 0 auto;
  top: 30px;
  border: 3px solid rgba(0, 0, 0, 0.6);
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
}

.bird {
  width: 100%;
  height: 100%;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
}

.bird:hover {
  -webkit-filter: grayscale(0%);
}

.grayscale p {
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
}

.grayscale:hover p {
  display: inline;
}

.grayscale p:hover strong { /* Can be h1, h2, span, etc... */
  color: brown;
}

HTML

<div class="grayscale">
   <img class="bird" src="http://jpowell43.mydevryportfolio.com/flatDesign/images/birds.svg" alt="birds" />
   <p><strong>The wild Swallow bird</strong><br />This crazy and unique bird loves to fly over the sky in search of a tasty div tag</p>
</div>

JSFIDDLE

If this is does not fit your needs then let me know and I'll remove or edit it. I just find it better to not use jQuery if you don't have to!

Josh Powell
  • 6,219
  • 5
  • 31
  • 59
  • Ah! So simple. jQuery (isotope) is being used for the image sorting effect, so I've been in JS-land. Let me try your suggestion. – Amie Oct 28 '13 at 15:04
  • haha I know what you mean, once you're in the land of jQuery you may never find your way out :p – Josh Powell Oct 28 '13 at 15:09
  • Alas, not so simple. Customizing a super-bloated WP theme (notice all the JS calls) — attempting to rewrite portfolio template now without breaking anything >. – Amie Oct 28 '13 at 15:45
  • Oh man, wordpress, such a scary tool ha. The best way I would suggest this is go into the css, find how the image is contained/named/what the title is in, and then let me know the html structure of that element. I will take a peak at the code on your site to see if I can find a good solution but word press makes a lot of unneeded code. – Josh Powell Oct 28 '13 at 15:51
  • This theme has been getting ready for Halloween for ages. Here is my Git repo: https://github.com/amie/FlowStep - includes/portfolio.php generates the thumbs. Please excuse the extra classes. (( ...time to learn Jekyll... )) – Amie Oct 28 '13 at 16:09
  • Alright I will check this out after lunch mate! Hopefully I can be of some help. – Josh Powell Oct 28 '13 at 16:16