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 Brian Gallagher
Brian Gallagher
9,074 Points

CSS Hover Transition duration

Hi,

I'm trying to get a smooth hover effect on the following image. I basically want the text to display with a transparent background when I hover on the image. Everything else is working for me but the 'duration'. It's transitioning instantly.

Could anyone suggest where I've gone wrong?

Thanks,

Brian

<div class="imgWrap">
<img src="img.jpg" alt="#" width="250" height="250" />
<div class="rates">
<h3>Hover Text</h3>
</div>
</div>

.imgWrap {
  position: relative;
  height: 250px;
  width: 250px;
}

.rates {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(192, 143, 70, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;
  transition: visibility 2s !important;
  -webkit-transition: visibility 2s !important;
  -moz-transition: visibility 2s !important;
  -o-transition: visibility 2s !important;
}

.rates h3   {
  text-align: center;
}


.imgWrap:hover .rates  {
  visibility: visible;
  opacity: 1;
}

3 Answers

Becky Castle
Becky Castle
15,294 Points

Hi Brian, Try getting rid of the "visibility" on your transition property.

Brian Gallagher
Brian Gallagher
9,074 Points
Brian Gallagher
Brian Gallagher
9,074 Points

Becky,

Thank you so much. That was driving me crazy! Thought I'd tried everything.

Brian

Becky Castle
Becky Castle
15,294 Points
Becky Castle
Becky Castle
15,294 Points

Yay! Glad to help ;-)