Cómo crear efecto de imagen con CSS

eic2010 · 2020-08-19T00:31:51-0500

Hola quisiera saber si alguien sabe como puedo hacer este efecto de imagen con css

mxra8 · 2020-08-19T00:37:12-0500

Un contenedor arriba de la imagen y un box shadow interno

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Musking2020 · 2020-08-19T11:31:34-0500

Me uno a la pregunta

eic2010 · 2020-08-19T16:16:28-0500

mxra8 dijo:
Un contenedor arriba de la imagen y un box shadow interno

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Desde ya gracias por responder pero esa sombra esta detras de la imagen y la que quiero hacer parece que tiene que estar delante de la imagen

mxra8 · 2020-08-19T16:25:00-0500

eic2010 dijo:
Desde ya gracias por responder pero esa sombra esta detras de la imagen y la que quiero hacer parece que tiene que estar delante de la imagen

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Es lo mismo pero diferente

EricK Bueno · 2020-08-19T16:42:31-0500

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

eic2010 · 2020-08-19T16:44:49-0500

mxra8 dijo:
Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

Es lo mismo pero diferente

me parece mas acertado!!! gracias!!! ahora tengo que ver como lo hago desde wordpress quiero darle ese efecto a las imagenes destacada.

mxra8 · 2020-08-19T17:41:19-0500

Si me das apertura yo te lo hago gratis

eic2010 · 2020-08-19T20:30:32-0500

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 · 16 Sep 2020

mxra8 dijo:
Un contenedor arriba de la imagen y un box shadow interno

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

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;
}

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

jsfiddle.net

EspErpENto · 25 Oct 2020

box-sizing: border-box es una propiedad moderna que muchos navegadores todavía no soportan.

Así que lo correcto es:

-webkit-box-sizing: border-box; Para dar soporte a Safari y Chrome
-moz-box-sizing: border-box; para Firefox
box-sizing: border-box; para Opera, IE8+

Cómo crear efecto de imagen con CSS

eic2010 Seguir

Adjuntos

mxra8

Edit fiddle - JSFiddle - Code Playground

Musking2020

eic2010

Edit fiddle - JSFiddle - Code Playground

mxra8

Edit fiddle - JSFiddle - Code Playground

EricK Bueno

eic2010

Edit fiddle - JSFiddle - Code Playground

mxra8

eic2010

Baires23

Edit fiddle - JSFiddle - Code Playground

Edit fiddle - JSFiddle - Code Playground

EspErpENto