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

Posted by Abhijeet Das
Abhijeet Das
Courses Plus Student 3,158 Points

hover and background overlay

Hello, I need help from you guys, here my link in codepen: http://codepen.io/anon/pen/bNMJxd?editors=110 I want to achieve two things here: 1) I want to keep my zoom out effect when I hover my pointer on the link. and 2) I want to overlay a color on the image and when I hover on the image it should gone. Please help me out here. Thanks Abhijeet

2 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi there Abhijeet Das,

1) I want to keep my zoom out effect when I hover my pointer on the link

Change your HTML so that .tint is inside .model and below the anchor. Like this:

<div class="wrapper">
  <div class="modal">
    <a href="#">hover on me</a>
    <div class="tint"></div>
  </div>
</div>

Then in your CSS, add z-index: 1; to the .modal a rules. Also, change .tint:hover to .modal:hover > .tint.

2) I want to overlay a color on the image and when I hover on the image it should gone.

Add this to your CSS:

.tint:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  /* Set color and opacity to your desire */
  background-color: rgba(255, 0, 0, 0.4); 
  /* Set speed and easing to your desire */
  transition: background-color 0.4s ease-in-out;
}
.modal:hover > .tint:after {
  background-color: transparent;
  /* Set speed and easing to your desire */
  transition: background-color 0.4s ease-in-out;
}

Tested with Firefox 35.0.1.

Abhijeet Das
Abhijeet Das
Courses Plus Student 3,158 Points

wow!! that works as magic thank you Sean T. Unwin ! what about the second issue? like if i use any tint, it should gone when i hover on my link. Please help on that.

Sean T. Unwin
Sean T. Unwin
28,690 Points

I have updated my original answer to include the 2nd request.

Abhijeet Das
PLUS
Abhijeet Das
Courses Plus Student 3,158 Points
Abhijeet Das
Abhijeet Das
Courses Plus Student 3,158 Points

Hello Sean T. Unwin, It works like charm!!! and i understand what you did, Thanks for helping me to learn it. kudos!! Abhijeet

Sean T. Unwin
Sean T. Unwin
28,690 Points

Happy to help. :)