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
.