5

Tengo el código:

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}
<img class="desvanecer" src="https://i.sstatic.net/tCYnU.png" />

con esto logro desvanecer la imagen al pasar el mouse, pero ¿cómo se hace para que aparezca información adicional sobre la imagen desvanecida? Es decir que sobre la imagen desvanecida diga algo como ejemplo: "Hola, esta es la información del logo".

Ejemplo:

La imagen se torna gris y se ubica texto por encima

Quisiera conocer lo mas básico para lograrlo.

7
  • quisiera conocer lo mas basico para lograr la pregunta, solo veo mucho codigo y no se que es bootstrap, gracias por atender la pregunta..
    – Rick
    Commented el 14 ene. 2017 a las 18:06
  • 2
    No creo que sea un duplicado porque solo parece requerirse texto sin necesidad de JS o bibliotecas de ningún tipo. Pero deberías aclarar al menos cómo la solución de Omar no te vale, para que tengamos una idea mejor de lo que quieres
    – Alvaro Montoro
    Commented el 14 ene. 2017 a las 18:12
  • mas especifico.. www.dribbble.com pasa el mouse sobre el trabajo que muetran.. gracias..
    – Rick
    Commented el 14 ene. 2017 a las 18:28
  • aldanux.. eso es exactamente lo que busco.. ahora lo estudiare.. muchas gracias..
    – Rick
    Commented el 14 ene. 2017 a las 18:29
  • 1
    Nosotros no somos adivinos y no podemos saber exactamente lo que buscas a no ser que nos lo digas (mediante texto o una imagen). Por favor, describe mejor lo que buscas, ayúdanos a ayudarte
    – Alvaro Montoro
    Commented el 14 ene. 2017 a las 20:13

5 respuestas 5

8

Cómo funciona el ejemplo que enlazas

Si miras el código, puedes ver que lo que hace Dribble es que cada "tarjeta" tiene diferentes contenedores y elementos dentro de un div (simplificando): uno contiene la imagen, otro contiene el texto con la descripción, otro las opciones, y otro el autor.

El div que contiene la descripción de la imagen (.dribbble-over) tiene por defecto opacidad de 0 (por lo que está invisible), y cuando se pasa el ratón por encima del contenedor de la imagen (.dribbble-img), se cambia su opacidad a 1. Todo hecho con CSS y transiciones CSS (sin necesidad de usar JavaScript).

Cómo adaptar ese ejemplo a tu código

El código que compartes en la pregunta funciona de la manera contraria: cuando se pasa el ratón por encima de la imagen, ésta pierde opacidad haciéndose casi invisible. Pero eso no es un problema, sólo cambiará un poco el funcionamiento.

Lo que debes hacer:

  • Crear un contenedor (un div) que tendrá dentro la imagen.
  • Crear dentro del mismo un nuevo contenedor para poner el texto que se mostrará.
  • Posicionar este último contenedor de manera absoluta y que quede detrás de la imagen (con un z-index negativo o menor que el de la imagen)

Aquí dejo un ejemplo simple de cómo podría ser:

.div-imagen {
  display:inline-block;
  position:relative;
}

.div-imagen > div {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  padding:10px;
  margin:0;
}

.desvanecer:hover {
  opacity: 0.07;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  -ms-transition: opacity 500ms;
  transition: opacity 500ms;
}
<div class="div-imagen">
  <div>
      Descripción de la foto que quieres que se muestre
  </div>
  <img class="desvanecer" src="http://placehold.it/200x200" />
</div>

1
  • muchas gracias.. y a todos por su paciencia... he aprendido algo gracias a todos
    – Rick
    Commented el 16 ene. 2017 a las 15:30
7

Ejemplos como se podría realizar el efecto (solo CSS):

Mostrar texto cuando se hace en hover en una imagen

#1: con line-height:

.img-container {
  width: 300px;
  height: 200px;
  position: relative; 
}

.img-container p {
  margin: auto;  
  color: #fff;
  text-align: center;
  
  line-height: 200px; /* igual height de la imagen */
  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}
<div class="img-container">
    <img src="http://placehold.it/300x200">
    <p>Texto de prueba</p>
</div>

#2: con padding:

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  line-height: 0;
}

.img-container p {  
  height: 0;
  margin: 0;
  
  padding: 100px 0; /* == mitad de la imagen (height) */
  
  color: #fff;
  text-align: center;  
  background: #000;
  transition: opacity .4s linear;
  cursor: pointer;  
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
}

.img-container:hover p {
  opacity: .75;  
}
<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

#3: con efecto slide-up texto:

.img-container {
  width: 300px;
  height: 200px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #000;
  opacity: 0;
  transition: opacity .3s linear;   
}

.img-container:hover:before { 
  opacity: .75;
}

.img-container p {
  width: inherit;  
  color: #fff;
  text-align: center;
  position: absolute;
  top: 100%; 
  transition: top .3s linear;
}

.img-container:hover p {    
  top: 70%;
}
<div class="img-container">
  <img src="http://placehold.it/300x200">
  <p>Texto de prueba</p>
</div>

#4: similar al ejemplo de la imagen:

introducir la descripción de la imagen aquí

body {
  background: #eee;
}

.img-container {
  width: 200px;
  height: 150px;
  padding: 10px 10px 30px 10px;
  background: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.img-container:before {
  content: '';
  width: inherit;
  height: inherit;
  position: absolute;
  background: #fff;
  opacity: 0;
  transition: opacity .1s ease-out;   
}

.img-container:hover:before { 
  opacity: 1;
}

.img-container .text-container {
  width: inherit;
  padding: 5px 15px;
  color: #444;
  position: absolute;
  top: 100%; 
}

.img-container:hover .text-container {    
  top: 0;
}

p {
  color: #888;
  font-size: .75em;
  line-height: .2em;
}

i {
  font-style: normal;
}
<div class="img-container">
  <img src="http://placehold.it/200x150">
  <div class="text-container">
    <h4>Titulo</h4>
    <p>Texto de prueba</p>
    <p>Texto de prueba</p>
  </div>
  <i>icons | icons | icons |<i/>
</div>

5

No es una ardua tarea de realizar, leyendo un poco lo consiguías.

Pasos:

  1. Encerrar la imagen en un figure
  2. Añadir también un <figcaption> con la descripción de la imagen

let image = document.querySelector('.image');
let select = document.getElementById('effect');

select.addEventListener('change', function (e) {
  image.className = `image ${this.value}`;
});
@import url('https://fonts.googleapis.com/css?family=Exo');

.image {
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
  height: 250px;
  overflow: hidden;
  margin: 15px auto;
  position: relative;
  width: 250px;
}

figure img {
  border-radius: 5px;
  height: 100%;
  transition: all .23s ease;
  width: 100%;
}

.image figcaption {
  color: #555;
  font-family: 'Exo';
  height: 100%;
  left: 0;
  line-height: 250px;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  top: 0;
  transition: all .23s ease;
  width: 100%;
}

.image.fade figcaption {
  opacity: 0;
  visibility: hidden;
}

.image.push figcaption {
  top: 0;
  transform: translateY(250px);
}

.image.push:hover > img {
  transform: translateY(-250px);
}

.image.push:hover > figcaption {
  transform: translateY(0px);
}

.image.fade:hover > img {
  opacity: 0;
  visibility: hidden;
}

.image.fade:hover > figcaption {
  opacity: 1;
  visibility: visible;
}

/* Form styles */
form {
  margin: 20px auto;
  width: 150px;
}

form label {
  font-family: 'Segoe UI', 'Open Sans';
  font-size: 14px;
  font-weight: 500;
}

form select {
  border: 1px solid #ddd;
  border-radius: 2px;
  font-family: 'Segoe UI', 'Open Sans';
  margin: 0 0 0 10px;
  padding: 0 1rem;
}
<figure class="image fade">
  <img src="http://4.bp.blogspot.com/-KcxlSXC0qk8/TeKSFXmSAjI/AAAAAAAAAS8/cYqGQolvNbs/s1600/3musicos.jpg">
  <figcaption>Los tres músicos</figcaption>
</figure>

<form>
  <label for="effect">Effect</label>
  <select id="effect">
    <option value="fade">Fade</option>
    <option value="push">Push</option>
  </select>
</form>

2
  • 1
    Hola Mariano, creo que el OP fue claro en su objetivo, al menos para mí, queda claro. Por otro lado no iba a contestar, es más, voté por duplicado, pero @AlvaroMontoro, autor de la respuesta de la pregunta de referencia, aclaró que no podría tratarse de un duplicado, por lo que escribí ésto. Saludos y gracias por las recomendaciones, las tendré en cuenta en la próxima oportunidad.
    – gugadev
    Commented el 15 ene. 2017 a las 12:48
  • +1 a esta buena respuesta Commented el 17 ene. 2017 a las 12:31
3

Tal vez utilizando el atributo title logres lo que deseas:

<img class="desvanecer" src="logo.png" title="Hola, esta es la información del logo." />
3
  • gracias omar, pero no es lo que buscaba.. gracias por atender..
    – Rick
    Commented el 14 ene. 2017 a las 18:07
  • 1
    @Rick ¿qué es lo que quieres que se muestre? ¿Y cómo no es esto lo que buscas? Si es solo texto y no quieres usar JavaScript, title es una buena opción
    – Alvaro Montoro
    Commented el 14 ene. 2017 a las 18:09
  • Tal vez lo que quieres hacer es un Tooltip, échale un ojo a este enlace: w3schools.com/howto/howto_css_tooltip.asp Commented el 14 ene. 2017 a las 18:12
1

si no deseas usar frameworks te propongo las siguiente solución:

Usar un div contenedor de la imagen y un div hermando de la imagen donde se guarda la descripción del evento hover.

luego capturar el evento hover para el div padre, para ocultar y mover el div de la descripción con css y jquery.

otra opción es usar animate.css para realizar los efectos de movimiento.

HTML:

<body>
  <div class="contenedorImg">    
    <img  src="http://lorempixel.com/400/200/" />
    <div class="contenedorDescripcion">Contenido de la descripción</div> 
  </div>
</body>

CSS:

body{
  margin: 0;
}
.contenedorImg{
  width: 400px;
}
.contenedorDescripcion {   
   color : #FFF;
   width: 400px;
   height: 200px;
   position: absolute;
   top:200px;
   left:0;
   background: rgba(0,0,0,0.5);
   visibility: hidden;
   transition:  top 0.5s;
   }

   .muestraDescripcion{
     top: 0 !important;
   }

   .hidden{
       visibility: hidden !important;
   }
   .visible{
       visibility: visible !important;
   } 

Javascript (JQuery)

$(document).ready(function(){
    $(".contenedorImg").hover(
    function(){

        $(".contenedorDescripcion").addClass("visible muestraDescripcion");
    },
    function(){

    $(".contenedorDescripcion").removeClass("muestraDescripcion");
    setTimeout(
        function(){ 
        $(".contenedorDescripcion").removeClass("visible muestraDescripcion"); 
        $(".contenedorDescripcion").addClass("hidden");
        }, 300);
    }
    );
});

Revisa el ejemplo andando, el mouseleave al bajar el div se puede comportar un poco raro, pero basta con un poco de más codigo js! https://jsfiddle.net/camilocalderont/svg9ho0m/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.