Slide out div with no overlay on the left and only hover on image

[toolman]

Hi,

I have the following fiddle:

Edit fiddle - JSFiddle - Code Playground

What I am trying to do it have the div slide out from the left only when the the user hovers on the round image. Also, not to slide out when the yellow box is hovered over - i will be making this transparent or removing it.

The other thing is that I want to have the red slide out appear/start from behind the circula image. At the moment, the red is visible to the left of the image.

This is basically what I am trying to achieve:

I’m guessing it’s something to do with left or margin-left and maybe pointer-events?

Any ideas what I would need to do?

Thanks!

[PaulOB]

This is really rushed and magic numberish as I;m just going out but it should give you the idea.

You will have to decide what to do on small screen and with overflowing content etc.

The code can probably be halved with a little more finesse

[toolman]

That is awesome! Many thanks. I have removed the grey box background so it’s just the image and then the slide out.

Regarding smaller screens, maybe I could just have one per column which will slide out upon tap?

[PaulOB]

@toolman

Regarding smaller screens, maybe I could just have one per column which will slide out upon tap

It may be better if you don’t do the hover effect for touch and display the content by default. You can use something like this to use for applying hover styles,

@media (any-hover: hover) {
      /* anything that uses :hover should be in this block including all the initial hiding etc */
   /* e.g. The default view should be to show the message and then you use this block to hide it and set hover styles */
  }

You can get touch to work with the normal hover but you’d need to use an anchor as the trigger and then another anchor to close it.

Here’s an example just for testing (test on mobile at screens of 800px and less).

Alternatively you would need a script to detect a touch down and touch up and mimic the css effect by adding a class to use instead of the :hover.

Hover is a minefield at the best of times

[toolman]

Cool, that makes sense displaying it by default. I will have a look into the hover as a script to detect doesn’t sound too much fun as I’ve used it before and didn’t get on with it.

[toolman]

Out of interest, why is this used?

border-radius: calc(var(--my-height) / 2) 0 0 calc(var(--my-height) / 2);

instead of just border-radius:100px for example?

[PaulOB]

@toolman

Out of interest, why is this used?

If you changed the height of the div to say 120px then you would have to go through the code and change everything else that is related to that.

Now you can make the change in one place and the variable is used throughout.

[toolman]

That’s a good way of doing it. Thanks for explaining

[toolman]

Hi again,

I have been playing with the following grid with a hover effect:

Edit fiddle - JSFiddle - Code Playground

This all works fine, but I am thinking the images/circles/avatars on the right may look better sliding out to the left instead of the right. So the left elements slide out to the right and the right hand side elements slide out to the left.

I have tried changing this:

transform: translateX(100%); on the .hid-box on the right hand side elements, but it doesn’t seem to be doing what I want. I’ve also tried to set the margin to 0, but still no luck.

Does anyone know how I would achieve the right hand side ones sliding out to the left? - Basically a mirror or the right?

Or, would you say that this isn’t really required and works fine as it is? I am thinking that the slide out content may go off page on some screens.

Thanks!

[PaulOB]

Very difficult as you would have to transform the inner elements to the left but the problem is that the overflow on the parent is hidden so won’t see them.

If you remove the overflow then the whole slide out is always visible to the left,

You could possibly hide the inner elements and once open could slide those items backwards but you need a complicated keyframe to reveal after a certain time.

Anpther possible idea is to move those items out of the overflow:hidden slider into their own slider and then you mat be able to do both.

A lot of work

[toolman]

Ah yes, I see what you mean. Thinking about it, I may keep it as it is and make sure things don’t go missing off the page with various screen sizes.

Thanks again!