General Problems with Hover Transitions

Question

I am having some trouble with hover transitions. I have a fullwidth bar of 13 images. When you hover over them, some text appears depending on which one you hover over. I would like to slow down the transition time, and also make it so the images go opaque at the same time the image slides up (currently it slides up and then goes opaque). And if at all possible, it would be neat to have an image stay "hovered" until one of the other images is hovered. One more thing, it gets a little jittery if you hover near the bottom of an image and move the cursor left or right, hopefully this can be fixed too.

What I have so far is on this page: http://homeinspectioncarync.com/testpage/

Following is the CSS and HTML I've used. Sorry for the one-line HTML, I couldn't quite figure out how to format that correctly in here. It follows the same pattern though img1 /img p1 /p img2 /img p2 /p and so on until it gets to 13. I know the community here is great so any help is appreciated!

CSS:

.images {
  height: 100px;
  width: 100px;
  position: absolute;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  transition: all 1000ms ease;
}

.images:hover {
  opacity: 0.5;
  top: -10px;
}

.para {
  position: absolute;
  left: 600px;
  top: 200px;
  font-size: 200%;
  visibility: hidden;
}

#one:hover + #pone {
  visibility: visible;
}

#two:hover + #ptwo {
  visibility: visible;
}

#three:hover + #pthree {
  visibility: visible;
}

etc. (until 13)

HTML:

ghost_dad · Accepted Answer

So the main reason the two animations weren't activating at the same time is that transition only works when the non-hover state has the property defined that will be animated in the hover state. In your case, you were missing an initial declaration of the top property (thus that wasn't animating). I adjusted things a little to use transform instead, as this provides a smoother transition.

I also wrapped each image and paragraph in a container (which will fix the jittery issues you were seeing), because the image will animate independent of the container and won't be handling the hover event. In addition, I cleaned up quite a bit of markup. See my comments below for best practices there.

.image-container {
  position: relative;
  margin: 0;
  display: inline-block;
}
  
.images {
  height: 100px;
  width: 100px;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  transition: all 1000ms ease;
}

.image-container:hover .images {
  opacity: 0.5;
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}

.para {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  font-size: 200%;
  opacity: 0;
  transition: all 1000ms ease;
}

.image-container:hover .para {
  opacity: 1;
}

A couple good rules of thumb, after looking through your markup:

Only use ID's when they are absolutely necessary (if you're targeting them with JavaScript, and if there really will only be one ever).
Use absolute positioning sparingly. With your original code, creating a responsive page would be almost impossible since all the elements were stuck in one place. Instead, keep parent elements in the flow and absolute elements closely coupled.
Make sure that html attributes are syntactically correct. You were writing class = "images". Update to class="images".
No inline styling. It makes it very difficult to update the page later.

General Problems with Hover Transitions

Answers (2)

Related Questions