Trocar imagem com mouse em ul e li

Resolvido fabessauro
(@fabessauro)

7 anos, 6 meses atrás
Boa tarde gente, tudo bem?
Faz um tempo que estou enferrujado em código e eu estou com uma dúvida aqui. Eu não sei sobre jQuery/Java e estou criando um tema para o WordPress. Ele já está quase pronto, mas tô tendo alguns problemas nessa parte que mostro na imagem. Eu vou fazer uma especie de “slider” onde está esse círculo, porém não será slider. Serão 4 círculos igual a este com posts de uma categoria especifica. O código pra mostrar isso já está pronto e fiz os testes e está funcionando. Um dos problemas é que ele continua aparecendo essa bolinha no canto e não consegui tirar ela pelo CSS. Outra dúvida minha é: onde tem aquele “título” em frente a imagem, eu queria fazer ele dentro da imagem. Essa é minha dúvida maior, porque eu não consegui encontrar muitas coisas que me ajudassem. Eu tentei de algumas formas, seguindo tutoriais que peguei pela net (que fazia coisas parecidas), mas não consegui. A ideia seria o mouse passar por cima da imagem e aquele título em frente ela surgir dentro da imagem com um background de cor diferente para cada um dos quatro circulos que vão estar ali.
Isso tem que ser feito com java? Ou só CSS/HTML eu consigo reproduzir isso? Alguém sabe como me ajudar? Ou algum tutorial, algo assim que me ajude??

Edit: a imagem não tava aparecendo.

Grato desde já!
- Este tópico foi modificado 7 anos, 6 meses atrás por fabessauro.

Visualizando 6 respostas - 1 até 6 (de um total de 6)

Moderador Felipe Elia
(@felipeelia)

7 anos, 6 meses atrás

Oi @fabessauro,

É possível fazer o que você quer só com CSS, não é preciso javascript não. Veja se esse tutorial consegue te ajudar.

Não esqueça de voltar para dizer se conseguiu, se ficou com alguma dúvida e, se for o caso, para marcar seu tópico como resolvido, ok?
Criador do tópico fabessauro
(@fabessauro)

7 anos, 6 meses atrás
Olá Felipe!
Pesquisando mais sobre o assunto, após ver o tutorial que você mandou, me restaram ainda outras dúvidas. Eu cai nesse site e adicionei o último código dele, porém ainda ficaram algumas funções “erradas”. O tema não está fazendo a leitura dos posts da categoria que defini, aparece apenas um e continua com esse erro na borda da imagem.
As imagens:
- Esta resposta foi modificada 7 anos, 6 meses atrás por fabessauro.
Moderador Felipe Elia
(@felipeelia)

7 anos, 6 meses atrás

Oi @fabessauro,

Sobre seus pontos:

– O tema não está fazendo a leitura dos posts da categoria que defini
Como e onde você definiu as categorias?

– continua com esse erro na borda da imagem.
Pela imagem não dá pra ver borda, pode explicar melhor?

Seu site está disponível em algum endereço? Para problemas de CSS é bem difícil ajudar sem ver o código.
Nura
(@archer-master)

7 anos, 6 meses atrás
Adicione na a propriedade list-style-type: none; a bolinha vai sumir.

Exemplo: .slider ul {list--style-type:none}

Posta o código do slider, fica mais fácil pra ajudar.
- Esta resposta foi modificada 7 anos, 6 meses atrás por Nura.
Criador do tópico fabessauro
(@fabessauro)

7 anos, 6 meses atrás

Nura, eu fiz isso e funcionou!
Felipe, consegui resolver o problema depois de pesquisar bastante algumas alternativas e agora ele está funcionando corretamente! 😀 Muito obrigado pelo suporte e apoio!

fabiulasouza
(@fabiulasouza)

7 anos, 4 meses atrás

Pessoal, boa tarde!

estou com um problema parecido. Me surgiu uma demanda para desenvolver uma solução igual a desse site: http://www.solarenergy.com.br. Seria uma solução em 360, feito em wordpress e responsivo. Alguém pode me ajudar???

Grata
Fabíula