0

Tenho um carrossel de imagens. Cada imagem é uma logo svg de altura fixa e largura variável. Preciso colocar um ponto abaixo de cada imagem selecionada, para isso usei o seguinte código:

CSS:

footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
    transform: translateY(50px);
}

HTML:

<div class="produto-logo selecionado">
    <img src="imagens/logos/erp.svg"/>
</div>

Resultado:

imagem

Porém dessa forma o ponto fica alinhado com o lado esquerdo da imagem. como posso fazer com que fique centralizado abaixo de cada imagem?

2 Respostas 2

1

Vc tem que incluir a coordenada X no seu transforn:translate() também. Repare que agora tem 2 valores (X, Y)

Veja o modelo abaixo para entender melhor:

.selecionado {
    display: inline-block;
    position: relative;
    width: auto;
}
footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    left: 50%;
    pointer-events: none;
    transform: translate(-50%, 50px);
}
<footer>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/100/30"/>
    </div>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/150/30"/>
    </div>
    <div class="produto-logo selecionado">
        <img src="http://unsplash.it/120/30"/>
    </div>
</footer>

2
  • o translate antes não estava funcionando, o width: auto; position: relative resolveu o problema
    – Pilati
    9/07/2018 às 16:33
  • @Pilati algumas coisas em CSS funcionam em cascata Pai/filho, por isso o pai com relative e o filho com absolute. Outras vezes quando a gente referencia algum valor no filho é preciso que o pai tb tenha algum valor. Isso não é regra absoluta, mas em alguns casos sem isso não da certo... Boa sorte ai tmj
    – hugocsl
    9/07/2018 às 16:37
0

Em vez de usar transform pode usar top. Usando transform você terá que usar prefixos (ex.: -webkit, -ms...) para funcionar em navegadores pre-modernos. Use top: 50px e para centralizar você usa left: 50% e margin-left: -5px (metade do width). Veja o exemplo:

.produto-logo{
   position: relative;
   width: 100px;
}

footer .selecionado::before {
    position: absolute;
    content: '';
    background-color: #009CE0;
    border-radius: 50%;
    width: 10px;
    height: 10px;
    pointer-events: none;
    top: 50px;
    left: 50%;
    margin-left: -5px;
}
<footer>
   <div class="produto-logo selecionado">
       <img height="40" width="100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"/>
   </div>
</footer>

2
  • estou usando o transform em outras partes do site, além disso a homologação está sendo feita apenas nas ultimas versões dos browsers
    – Pilati
    9/07/2018 às 16:34
  • Perfeito então.
    – Sam
    9/07/2018 às 20:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .