[Resolved] Triangle in the corner, adding an icon

[Erika]

Hi there,

I have a nice tricky question.

I´s like to add a triangle to the top left corner of a container and have an icon (svg or png) in it. When I hover the container, another container appears.

I solved part of it. I have the container, the triangle and the container that only appears on hover.

I have difficulty with
1) letting the triangle appear only when there is no hover over the container
2) placing an icon into that corner.

Can you help with some ideas?

Thanks, Erika

[Ying]

Hi Erika,

1. Try this:

.triangle-container:hover:after {
    border-color: transparent;
}

2. You can add an image block to the container, then use position: absolute; to position it.

[Erika]

Hi Ying,

simple and nice. Can I make the handpointer disappear when I hover on the image container?

Now I have
.handpointer:hover {
opacity:0;
}
but it makes the pointer disappear when one hover over the pointer and not the container…

Thank you!

[Ying]

You are hovering the container, so the :hover should be added to the contaienr:

.triangle-container:hover .handpointer {
    opacity: 0;
}

[Erika]

Exactly what I wanted, thank you. What I truly like on this support is that I always learn something new and also new ways to think.

Thank you, Ying.

[Ying]

You are welcome 🙂

It’s our pleasure!

[Author]

Posts