Como hacer este efecto en imagen

mxra8

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
Desde
17 Jul 2020
Mensajes
338

Musking2020

Baneado
VIP
Curioso
Programador
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Usuario con pocos negocios!
Desde
19 Ago 2020
Mensajes
6
Me uno a la pregunta
 

eic2010

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
19 Jun 2017
Mensajes
76

mxra8

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
Desde
17 Jul 2020
Mensajes
338

EricK Bueno

VIP
Lambda
Marketing
Verificado con videollamada
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
3 May 2018
Mensajes
2.953
Hay varios themes que tienen la opción de sombra, o lo que puedes es agregar los CSS, uno de esos themes es NewsPaper de TagDiv, es más puedes usar los post con un degradado o una capa de colores
 

mxra8

No recomendado
Verificación en dos pasos desactivada
Verificado por Whatsapp
Usuario nuevo
Desde
17 Jul 2020
Mensajes
338
Si me das apertura yo te lo hago gratis ;)
 

eic2010

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios!
Desde
19 Jun 2017
Mensajes
76
Desde ya muchas gracias con tu ayuda lo pude conseguir!!!

les dejo para si alguien lo necesita en wordpress

agregue dentro de <div class='post-thumb'>
</div>


<div id="shadow">
</div>


y luego en

css adicional


.post-thumb {
position: relative;
box-sizing: border-box;

background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
height: 100%;
}

#shadow {
position: absolute;
bottom: 0;
left: 0;
background: transparent linear-gradient(180deg,#00000000 0%,#000000 100%) 0% 0% no-repeat padding-box;
width: 100%;
height: 150px;
}

.post-thumb img {
width: 100%;
}
 

Baires23

VIP
Épsilon
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
8 Abr 2017
Mensajes
773
Un contenedor arriba de la imagen y un box shadow interno

Usa este codigo y modifica lo siguiente:

CSS:
#supercontainer {
    position: relative;
    box-sizing: border-box;
    width: 379px;
    background: transparent linear-gradient(180deg,#ffffff00 0%,#ffffff 100%) 0% 0% no-repeat padding-box;
    height: 100%;
}

#shadow {
  position: absolute;
    bottom: 0;
    left: 0;
    background: transparent linear-gradient(180deg,#ffffff00 0%,#ffffff 100%) 0% 0% no-repeat padding-box;
    width: 100%;
    height: 150px;
}

 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba