Cards from Boxed Content

[George]

Hi there,

I’m looking to create some clickable cards like the following examples, but I cannot figure out how to work the css with the boxed content section. Or should I be using a text block? I cannot seem to get images to go full width across and the hover click to work properly.

Example of the look i’m going for:

https://f1experiences.com/ – see the cards where the caption becomes black on hover
Or
https://codepen.io/doonnnx/pen/QbBKxv – that’s more complicated and doesn’t have to be that advanced

Is there anything you can suggest?

This is my css:

Image:

.card-img {
  height: 225px;
}
.card-img img {
  width:100%;
  border-radius: 4px 4px 0px 0px;
}

Boxed Content (card):

a:hover .thecard {
  box-shadow: 0 10px 50px rgba(0,0,0,.6);
}
.thecard {
  width: 300px;
  margin: 5% auto;
  box-shadow: 0 1px 30px rgba(0,0,0,.4);
  display: block;
  background-color: #fff;
  border-radius: 4px;
  transition: 400ms ease;
}

And then to force padding for the text using a div:

<div class="card-caption">
</div>

and css for the div

.card-caption {
  position: relative;
  background: #ffffff;
  padding: 15px 25px 5px 25px;
  border-radius: 0px 0px 4px 4px;
}

Love some assistance or where to look.

Kind regards,

George

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[George]

Hi Rui,

It’s a private post, so you need to login with the details provided with initial topic post here to see it. We don’t like to test pages that the public could stumble upon.

The recent posts asset could work, but I want them to be in a specific order, can I order them by date if i am using a plugin that schedules posts for future dates (event site)?

Or I want to do something like this: https://www.w3schools.com/howto/howto_css_cards.asp

Thanks,

George

[David Martin – Support]

Hi,

You can use this plugin to order your posts: https://en-gb.wordpress.org/plugins/post-types-order/.

We recommend that you seek to hire a freelance developer if you need to make the above customisations: http://www.swiftideas.com/customization/