Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Alex Chow
Alex Chow
4,521 Points
Posted by 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.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

fixed code formatting

2 Answers

Joe Beltramo
Joe Beltramo
Courses Plus Student 22,191 Points

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
Alex Chow
Alex Chow
4,521 Points

Ah, I see. Thanks for your quick responses!

Joe Beltramo
PLUS
Joe Beltramo
Courses Plus Student 22,191 Points
Joe Beltramo
Joe Beltramo
Courses Plus Student 22,191 Points

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
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.