¿Cómo hacer un efecto de expansión de descripción al pasar el mouse por el título de una imagen?

PipoChalan · 24 Nov 2017

hola resulta que estoy intentando hacer este efecto que es pasar el puntero del mouse por el titulo de las imagenes y se expande una descripcion, dejo la web de donde vi la idea Omnilife Productos | Omnilife Products

alguien sabe como lograr hacer eso , dejo imagen adicional

ayuda por favor

advisertutos · 24 Nov 2017

si lo que quieres es volverlos transparentes .png es con photoshop

- - - Actualizado - - -

y si es para crear las marcas personalizadas es con un programa que he visto por ahi en las web warez pero la verdad no me acuerdo del nombre ahora

krusty72 · 24 Nov 2017

En el div que tiene el fondo oscuro y el título, usas "transform" en h😱ver.

El fondo transparente es con opacity.

Yohandy Gonzalez · 24 Nov 2017

si es para wordpress con un theme ecommerce ya viene configurado eso que quieres lograr.

PipoChalan · 24 Nov 2017

sigo buscando como hacerlo , alguien me da algun ejemplo basico

José Antonio · 24 Nov 2017

como te dicen es un efecto hover, de hecho si sabes html, tu mismo puedes tomar el codigo fuente y adaptarlo

Rawed · 29 Nov 2017

Hola amigo tengo la solucion para ti!

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Sonyco · 29 Nov 2017

Aquí lo tienes: A Pen by Noguchi Takanori

- - - Actualizado - - -

Aquí otro ejemplo: Sliding overlay on hover

¿Cómo hacer un efecto de expansión de descripción al pasar el mouse por el título de una imagen?

PipoChalan

advisertutos

krusty72

Yohandy Gonzalez

PipoChalan

José Antonio

Rawed

Sonyco

Temas similares