Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Posicionamento de um botão

por Translators101
| 25.4k xp | 7 posts
Proprietário

Olá, pessoal.

Estou tomando uma surra para posicionar um botão de play no canto inferior direito sobre uma imagem. O botão também só deve aparecer quando o mouse estiver sobre a imagem.

O CSS que encontrei referente a este botão é este aqui e a imagem está abaixo:

.playbtn {
    display: inline;
    -webkit-transition: all 0.5s ease;
}

.playbtn .triangle {
    -webkit-transition: all 0.7s ease-in-out;
    stroke-dasharray: 240;
    stroke-dashoffset: 480;
    stroke: var(--iq-white-color);
    transform: translateY(0);
}

.playbtn:hover .triangle {
    stroke-dashoffset: 0;
    opacity: 0;
    stroke: var(--iq-primary);
    animation: trailorPlay 0.7s ease-in-out;
}

.playbtn:hover .circle {
    stroke-dashoffset: 0;
    stroke: var(--iq-primary);
}

Alguém pode ajudar um avô novato em CSS? ;-)

https://cdn1.gnarususercontent.com.br/1/564313/382761a0-b318-427c-b4f6-b170de8c9e52.png

2 respostas
solução!
por Victor Costa Santos
| 1906.9k xp | 3653 posts
Alura Scuba Team Monitor de ForumOps

Opa Dev, tudo bem?

Uma ideia para posicionar um elemento sobre o outro é utilizar da propriedade position: absolute deixo um código de exemplo:

.playbtn {
  position: absolute;
  bottom: 10px; /* ajuste o valor conforme necessário para posicionar o botão */
  right: 10px; /* ajuste o valor conforme necessário para posicionar o botão */
  display: none;
  /* adicione outros estilos ao botão, como tamanho, cores, etc. */
}

Ou do z-index que sobrepõem um elemento colocando na camada abaixo ou em cima.

Mas com base no código compartilhado não consigo simular o ambiente, se possível você poderia compartilhar o projeto, seja ele upado no github ou em uma pasta no drive contendo os assets dentre outros arquivos, dessa forma consigo lhe auxiliar de forma mais assertiva, ou até mesmo o arquivo HTML, já ajudaria bastante.

Fico no aguardo e a disposição para lhe auxiliar da melhor forma, um grande abraço e até mais!

por Translators101
| 25.4k xp | 7 posts
Proprietário

Obrigado, Victor!

A solução foi bem próxima do que você sugeriu. Veja:

.block-images .hover-buttons { position: absolute; left: 65%; top: 70%; }

Só o que precisei foi encontrar a classe correta do botão e brincar um pouco com os valores.

Grande abraço.

William Cassemiro