Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Alex Chow
Alex Chow
4,521 Points

Hover Image Link

Hi guys,

I'm creating a portfolio website for a client. I have 6 images separated in 3 columns and two rows. Each one displays an image with a caption below. I'm trying to add a hover effect to only the image portion of this group however, the effect doesn't work with the a:hover property.

Here is the html:

   <div class="img-responsive">
      <div class="img-box">
         <a href="#" data-reveal-id="myModal-1">
            <img alt="Image"
               src="images/image.png"/>
         </a>
      </div>
      <div class="caption">
         <h1>MAS Branding</h1>
      </div>
   </div>

Here is the css:

   .img-box a:hover {
      z-index: 600;
      color: rgba(27,178,147,0.775);
      transition: all .85s;
      -webkit-transition: all .85s;
   }

Thank you for any help.

fixed code formatting

2 Answers

Ah, I see. So what they are doing on behance is actually a little css trickery to make it look as if they have modified the image, making it look more 'white'. What they are actually doing, is, with the help of javascript adding a class to the parent div element (grandparent actually).

The grandparent div has a background that is white. So when the class 'hover' is applied to it, any img tag inside the hover class will have it's opacity reduced. Which looks something like this:

.hover a img {
    opacity: 0.65;
}

Since the opacity is lowered, you begin to see the background color bleeding through the image. Now I understand you may or may not know how to utilize javascript to handle this, so you should be able to set give your .img-box class a background-color of the color you wish then change your css .img-box a:hover to have the opacity: 0.65; property set. This should help you achieve what you are trying to do.

As a side note, the color property is specific to text and has no baring on the background. The z-index, only changes the positioning on which "layer" your image is being shown at. Changing the z-index to a higher position will not do anything visual unless you had things underneath it, which would then be hidden behind your image.

Alex Chow
Alex Chow
4,521 Points

Ah, I see. Thanks for your quick responses!

What specifically are you expecting to happen? The css you provided won't do anything to the image aside from changing it's z-index.

Alex Chow
Alex Chow
4,521 Points

Hi Joe,

I'm trying to create an effect found on this site: https://www.behance.net/search. When the user hovers over the image in the project thumbnails with the mouse, the hover effect turns white. For my portfolio site, I want the hover effect to lay a transparent teal color (rgba color property) over the image.

When I hover over the thumbnail with the current code, nothing happens so I thought maybe changing the z-index would help.