Vista previa al pasar cursor sobre imagen de post

José Antonio · 9 Abr 2017

No se si esté un poco raro el titulo, pero queria saber si alguien me puede decir o donde hay algun tipo de guia en el que pueda hacer eso, por ejemplo, yo tengo un pequeño cuadro con la imagen de portada del post, entonces al pasar el cursor sobre la imagen muestre una pequeña vista previa del post, no se si me explico para ser mas claro dejare unas capturas, espero que alguien me pueda ayudar, honestamente estoy algo atorado con esto,
esta es la accion que sucede al pasar el cursor sobre algun post de la pagina principal o en general de cualquier pagina

espero alguien me ayuda 🙁

Cicklow · 9 Abr 2017

mmm no se si plugin... pero eso lo haces con el theme... o editas el theme o consigues un theme que lo tenga... es javascript y css
Tipped - A Complete Javascript Tooltip Solution

google: tooltips js

Stron · 9 Abr 2017

Yo lo haría con css y modificando el index.php del theme:

primero obtener un fragmento o resumen del post lo cual haces con php.

Darle a un div un position:relative; y dentro del div la imagen de miniatura y el fragmento del contenido con un position: absolute, de esta forma pondría la imagen sobre el texto, después con un hover darle un opacity: 0, y asi conseguiría que al pasar el mause se oculte la imagen mostrando parte del contenido.

Esto es solo un ejemplo de como lo he hecho en algunos de mis themes, es cosa de que lo apliques si sabes hacerlo . Pero si no pues esperemos y alguien de otra idea de hacerlo con algún plugin o otra alternativa.

HTML:

<div class="entrada"> 
        <div class="imagen">
        <img></img> // obiamente esta se obtendría igual con php
        </div>
        <div class="texto">
        <p>codigo php con el que se obtiene el fragmento.</p>
        </div>

</div>

.entrada {
    position: relative;
}

.imagen{
    position: absolute;
    z-index:2;
}
.imagen:hover{
     opacity: 0;
}

.texto{
    position: absolute;
}

José Antonio · 10 Abr 2017

Stron dijo:
Yo lo haría con css y modificando el index.php del theme:

primero obtener un fragmento o resumen del post lo cual haces con php.

Darle a un div un position:relative; y dentro del div la imagen de miniatura y el fragmento del contenido con un position: absolute, de esta forma pondría la imagen sobre el texto, después con un hover darle un opacity: 0, y asi conseguiría que al pasar el mause se oculte la imagen mostrando parte del contenido.

Esto es solo un ejemplo de como lo he hecho en algunos de mis themes, es cosa de que lo apliques si sabes hacerlo . Pero si no pues esperemos y alguien de otra idea de hacerlo con algún plugin o otra alternativa.

HTML:

<div class="entrada"> <div class="imagen"> <img></img> // obiamente esta se obtendría igual con php </div> <div class="texto"> <p>codigo php con el que se obtiene el fragmento.</p> </div> </div> .entrada { position: relative; } .imagen{ position: absolute; z-index:2; } .imagen:hover{ opacity: 0; } .texto{ position: absolute; }

Muchas gracias me ha servido mucho, basicamente era la solucion, ya he podido hacer algo como lo que queria, gracias.

Vista previa al pasar cursor sobre imagen de post

José Antonio

Cicklow

Stron

José Antonio

Temas similares