Combine two :hover effects

phaserbeam

Hi...
i have a kind of a menu page with some galleries and pages here.
Currently the settings for the thumbs/info is set to overlay and hide on hover.
What i like to do is to show a small arrow if the user hovers a gallery/folder thumb (my own hover effect) while the gallery/folder title will disappear (the SM-hover effect).
Currently i tried this code which will add the ">" on hover. The problem is that the line-height will change and the thumbs under the gallery with the hover effect will move down some pixels.

Any help appreciated
Markus

P.S. Screenshot added...

li div:hover:after {
  font-family:'comfortaa';
  content:">"!important;
  opacity:1!important;
  position:relative;
  top: -1em;
  left: 0.2em;
  color:white;
  text-shadow:2px 2px 5px #111, 2px 2px 10px #222;
  font-size:5em;
  z-index:9999!important;
}

Smug Eric

Try setting a height for .sm-tile with this:

ul li .sm-tile {
height: 192px;
}

As it seems there is a hover action that is increasing that height.

phaserbeam

Smug Eric wrote: »

Try setting a height for .sm-tile with this:

ul li .sm-tile {
height: 192px;
}

As it seems there is a hover action that is increasing that height.

Yes... adding the ">" after the list element will change the line-height since it will be printed in a new line under the thumb. That's why i used to position/top elements to set the position on top of the thumb.

On a first look your code seem to work, the problem is after resizing the browser window the thumbs will not keep the layout.

So thanks for the help but i think changing the line height isn'a good idea...

OK, think i got it:

[COLOR="Red"]ul li div.sm-tile a:hover:after [/COLOR]{
  font-family:'comfortaa';
  content:">"!important;
  opacity:1!important;
[COLOR="Red"]  position:absolute;[/COLOR]
  bottom: 0.5em;
  left: 0.2em;
  color:white;
  text-shadow:2px 2px 5px #111, 2px 2px 10px #222;
  font-size:5em;
  z-index:999!important;
[COLOR="Red"]  line-height:0!important;
  margin:0px!important;[/COLOR]
}

Thanks anyway for having a look
Markus