I'm attempting to replicate the course listing thumbnail image layout used by Lynda.com (view example here). However, I'm unsure how to integrate the image within my current code setup found here. Specifically, I'm puzzled about the ideal dimensions for the image and handling resizing if the description extends beyond the border. Any advice on how to achieve this?
If push comes to shove, I'll keep descriptions concise. Moreover, I understand that enlarging the image with an elongated description will disrupt consistency with other thumbnail images on the page.
HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
skill_level  
date  
Views: views  
subject </p> </a>
CSS:
.course_list_border{
border-style: solid;
border-width: 1px;
border-color: #DCDCDC;
padding: 10px;
word-wrap: break-word;
}
.course_list_border:hover{
background-color: #F8F8F8;
cursor: pointer;
}
.course_list_link{
color: black;
}
.course_list_link:hover{
text-decoration: none;
color: black;
}
body {
min-height: 400px;
margin-bottom: 100px;
margin-top: 0%;
clear: both;
padding-top: 55px;
font-family: 'Roboto', sans-serif;
font-size: 16.5px;
}