Card element background image with title

[BlissfulBellies]

Hi support team,

I am hoping you can help me in regards to styling my classic card element.

I have added the following CSS so that I can display a background image in each card:

.x-card-outer .front, .x-card-outer .back {
background-size: cover;
background-position: center center;

}

#chiro .front .x-face-inner {
visibility: hidden
}

#chiro .front {
background-image: url(http://scarboroughchiro.naomipearce.com/wp-content/uploads/2018/10/chiro-card.jpg);
}

#maternity .front .x-face-inner {
visibility: hidden
}

#maternity .front {
background-image: url(http://scarboroughchiro.naomipearce.com/wp-content/uploads/2018/10/maternity.jpg);

}
#care .front .x-face-inner {
visibility: hidden
}

#care .front {
background-image: url(http://scarboroughchiro.naomipearce.com/wp-content/uploads/2018/10/Blood-Pressure-Nursing.jpg);
}
#aged .front .x-face-inner {
visibility: hidden
}

#aged .front {
background-image: url(http://scarboroughchiro.naomipearce.com/wp-content/uploads/2018/10/Aged-Nursing.jpg);
}
.page-id-7 .x-card-outer {
margin-bottom: 0;

This has worked great, however I would still like to have a transparent colour on each cover of the card and title showing. I would like a dark colour semi transparent over each image with the page title for each card displayed on the front. I hope this makes sense. Please note, I just want the title, no text or icon.

Could you possibly let me know what I need to do to make this happen???

Many thanks in advance,
Naomi

[ruenel]

Hello Naomi,

Thanks for the very detailed post information.

To resolve your issue, please remove your code:

#chiro .front .x-face-inner{
    visibility: hidden;
}

#care .front .x-face-inner{
    visibility: hidden;
}

#maternity .front .x-face-inner{
    visibility: hidden;
}

#aged .front .x-face-inner {
    visibility: hidden;
}

and use this code instead:

#chiro .front .x-face-inner,
#care .front .x-face-inner,
#maternity .front .x-face-inner,
#aged .front .x-face-inner {
    background-color: rgba(0,0,0,0.65);
    visibility: visible;
}

We would loved to know if this has work for you. Thank you.

[BlissfulBellies]

Thanks so much for your quick response!!! Is there a way I can also remove the text except for the title from the front cover?

Thanks again?

[BlissfulBellies]

Also just another quick question… I’ve also noticed that now really reduces the height of the image by removing the icon which I understand is part of it’s responsivness. Is there a way though to set a height for each card?

[paul.r]

Hi,

1. To set height, you can add min-height in the code provided by my colleague.

#chiro .front .x-face-inner,
#care .front .x-face-inner,
#maternity .front .x-face-inner,
#aged .front .x-face-inner {
    background-color: rgba(0,0,0,0.65);
    visibility: visible;
    min-height:283px;  
}

2. To remove the text from the front cover, you can add the code below in Theme Options > CSS

#chiro .x-face-outer.front .x-face-text,
#care .x-face-outer.front .x-face-text,
#maternity .x-face-outer.front .x-face-text,
#aged .x-face-outer.front .x-face-text {
         display:none;
}

Hope that helps

[BlissfulBellies]

Thank you so much for all your help!!! I really appreciate it!

I didn’t end up bothering with the min height… I needed to add it also to the image url as well as the back card however the margins of the row did not end up adjusting.

I actually liked how the cards looked without setting a min height so was happy with out that styling anyway.

Everything else is working perfectly! Thank you so so very much, you guys always make everything so easy. Really appreciate the support!

Naomi

[paul.r]

You’re welcome Naomi!