• Resolvido Paula Bonot

    (@p-bonot)


    Bom dia galera, bem to com uma dúvida aqui e queria saber se alguém pode me ajudar!

    É o seguinte.. tenho um loop pra mostrar os posts e tal, ai aparece as miniaturas das imagens destacadas, eu queria saber se tem como fazer um rollover do tipo, quando passa o mouse por cima aparece o titulo encima da imagem :/

    se alguém te ver alguma luz, por favor!

    Obrigada!

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • Olá.. talvez seja possível fazer isso com CSS: colocando o título dos posts como uma classe que fica invisível (hidden) até que se passe o mouse sobre a imagem.

    Criador do tópico Paula Bonot

    (@p-bonot)

    Não faço idéia de como fazer isso em CSS =/
    Eu tentei usar jQuery, mas ai quando passava o mouse por cima e uma miniatura fazia rollover em todas juntas.. acredito que porque o id se repete.. aí não faço idéia de como fazer =/
    Ainda sou nova em jQuery, não sei se é possível fazer o ID gerar automáticamente :/

    Nunca fiz exatamente isto como você diz, mas tenho “uma vitrine” (jQuery tools) que é alimentada com rss do site… como está em loop, ela exibe tantos posts quanto houverem no RSS.. tem mais haver com PHP do que com jQuery.
    Será que não seria mais simples procurar um plugin ou tema que faça isso?

    Oi,

    É questão de encontrar um tutorial com este efeito e ajustar o código do tema para que gere o html necessário, dá pra fazer com css puro e fica legal, não tem muito segredo!

    Aqui tem um exemplo legal que dá pra adaptar:
    http://css-tricks.com/slide-in-image-captions/

    Criador do tópico Paula Bonot

    (@p-bonot)

    Muito Obrigada pela ajuda, mas eu consegui fazer usando um onclick..
    Quem quiser ver como eu fiz segue o código abaixo:

    if ( has_post_thumbnail() ) { ?><div onmouseover="document.getElementById('price<?=$post->ID?>').style.display='block';" onmouseout="document.getElementById('price<?=$post->ID?>').style.display='none';">
    	<a href="<?php the_permalink() ?>"><img class="propimg" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=180&w=180&zc=1" alt="" /></a>
    		<?php } else { ?>
    	<a href="<?php the_permalink() ?>"><img class="propimg" src="<?php bloginfo('template_directory'); ?>/images/dummy.jpg" alt="" /></a>
    <?php } ?>
    <div id="price<?=$post->ID?>" style="display:none;height: 45px; width:auto; margin:5px; background:#000; padding: 5px; margin-top: -70px; opacity: 0.99; color: #FFF; font-weight: bold; text-shadow: 0px 0px white, 0px 0px #E5B71D; opacity:0.7; cursor:pointer;" onclick="window.open('<?php the_permalink() ?>','_self');"><?php the_title(); ?> <br /> <?php $price=get_post_meta($post->ID, 'wtf_price', true); echo $price; ?></div></div>

    É uma idéia bem bacana pra se implementar ^^

    Criador do tópico Paula Bonot

    (@p-bonot)

    Diana, Obrigada pela dica, com certeza eu vou aproveitá-la em outro template =D

Visualizando 6 respostas - 1 até 6 (de um total de 6)
  • O tópico ‘Rollover miniaturas’ está fechado para novas respostas.