Añadir espacio entre obras de portfolio

[claramontseny 0]

Hola a todxs,

 

Estoy construyendo mi web http://claramontseny.com y tengo una duda sobre cómo añadir verticalmente espacio en la visualización de las imágenes de mi portfolio. Los cambios me gustaría hacerlos en la index de forma que quede visualmente más estético. La web la estoy montando con WordPress.org usando el tema Olevia y desafortunadamente parece que ya no dan soporte. La web de Made4WP, el creador, ha desaparecido del mapa. Tengo unos pocos conocimientos de CSS, HTML y JavaScript, así que he podido ir haciendo algunas modificaciones sobre la plantilla y que vaya quedando como quiero.

 

He accedido a la hoja de estilos y he probado a modificar el porcentaje a mostrar de altura, pero creo que no lo estoy haciendo bien, sólo he conseguido modificar la altura de la transparencia en :hover, pero no de la imagen en sí. Estoy bastante despistada porque no sé si estoy mirando donde debería y me gustaría aprender a hacerlo. Si alguien me pudiera ayudar se lo agradecería.

 

Estos son los selectores asociados a los elementos del portfolio, que es donde estoy mirando y por ensayo y error viendo que no funciona lo que hago:

 

/*--------------------------------------------------------------

# Portfolio Items

--------------------------------------------------------------*/

.c-portfolio-items {

margin-top: 60px;

margin-top: 3.75rem;

margin-bottom: 30px;

margin-bottom: 1.875rem; }

 

.c-portfolio-items--home {

margin-top: 0; }

 

/*--------------------------------------------------------------

# Portfolio Item

--------------------------------------------------------------*/

.c-portfolio-item {

position: relative;

width: 100%;

margin-bottom: 30px;

margin-bottom: 1.875rem; }

 

.c-portfolio-item__header {

text-align: center;

margin: 60px 0; }

 

.c-portfolio-item__client {

margin: 0 0 5px;

font-size: 1.125em;

font-weight: 400; }

 

.c-portfolio-item__title {

margin: 0;

font-size: 1.5em; }

 

.c-portfolio-item__category {

display: block;

margin-top: 5px;

margin-top: 0.3125rem;

color: #aaa;

font-size: 1em; }

 

.c-portfolio-item__content {

max-width: 680px;

max-width: 42.5rem;

margin: 0 auto; }

 

 

 

También puede que la cosa vaya por aquí

 

/* Page Template: Home

--------------------------------*/

.c-portfolio-item--home {

float: left;

margin: 0;

text-align: left;

max-width: 100%;

opacity: 0;

-webkit-transition: opacity .5s ease-out;

transition: opacity .5s ease-out; }

@media screen and (min-width: 500px) and (max-width: 1024px) {

.c-portfolio-item--home {

max-width: 50%; } }

@media screen and (min-width: 1025px) {

.c-portfolio-item--home {

max-width: 33.33333333%; } }

 

.c-portfolio-item--home.is-masonry {

opacity: 1; }

 

.c-portfolio-item__client--home {

color: #fff;

font-size: 0.875em; }

 

.c-portfolio-item__title--home {

font-size: 1.125em;

color: #fff;

margin-top: 5px;

margin-top: 0.3125rem; }

 

.c-portfolio-item__category--home {

font-size: 0.875em;

color: #ccc; }

 

.c-portfolio-item__details-ct {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

background-color: rgba(0, 0, 0, 0.5);

opacity: 0;

-webkit-transition: opacity .3s ease-out;

transition: opacity .3s ease-out; }

 

.c-portfolio-item:hover .c-portfolio-item__details-ct {

opacity: 1; }

 

.c-portfolio-item__details {

padding: 30px 45px 45px;

-webkit-transition: padding .3s ease-out;

transition: padding .3s ease-out; }

 

.c-portfolio-item:hover .c-portfolio-item__details {

padding-top: 45px; }

 

.c-portfolio-item__client--home {

font-size: 1.125em; }

 

.c-portfolio-item__category--home {

margin-top: 10px;

margin-top: 0.625rem;

font-size: 1em; }

 

/* Grid layout

--------------------------------*/

.c-portfolio-item--grid {

position: relative;

width: 100%;

float: left;

margin-right: 3.75%;

margin-bottom: 30px;

margin-bottom: 1.875rem;

text-align: center; }

.c-portfolio-item--grid:nth-child(3n) {

margin-right: 0; }

@media screen and (min-width: 500px) and (max-width: 1024px) {

.c-portfolio-item--grid {

max-width: 50%;

margin: 0 auto 30px;

margin: 0 auto 1.875rem;

padding: 0 15px;

padding: 0 0.9375rem; } }

@media screen and (min-width: 1025px) {

.c-portfolio-item--grid {

max-width: 30.83333333%; } }

 

.c-portfolio-item__client--grid {

font-size: 1em; }

 

.c-portfolio-item__title--grid {

font-size: 1em; }

 

.c-portfolio-item__category--grid {

font-size: 0.875em; }