Adding Thumbnail Image With CSS Border - html

Question

I am trying to recreate what Lynda.com does with their course listing thumbnail image (see here). I am not sure how to place the image inside of my already existing code here. What I am not sure of is the dimensions of what the image should be each time and I am not sure how to handle the image resizing if my description is really long and widens the border. How would I do this?
If worse comes to worse, I will keep the descriptions small. I also realize that if the image also gets bigger if the description gets longer, the image getting bigger as a side effect will not look consistent with the 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;
}

Answer 1

I have made some changes in your css and HTML file
.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;
display: inline-block;
width: 30%;
}
.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;
}
<a class="course_list_link" href="">
<p class = "course_list_border">
<strong> Title </strong> <br/> <br/>
description <br/> <br/>
<img src="https://via.placeholder.com/200X150" alt="Lights" style="width:100%"/>
skill_level  
date  
Views: views  
subject </p>
</a>
As you are using bootstrap you can also make use of existing classes for creating this kind of image thumbnails
https://getbootstrap.com/docs/4.0/content/figures/

Answer 2

Generally, it's far better to separate all items into elements, instead of concatenating them into a single paragraph. For example:
<style>
a.course_list_link {
display: block;
width: 300px;
border: 1px solid #DCDCDC;
border-radius: 5px;
text-decoration: none;
font-family: 'Roboto', sans-serif;
transition: all, 0.3s, ease;
}
a.course_list_link:hover .thumbnail {
filter: grayscale(50%);
}
a.course_list_link:hover {
background-color: whitesmoke;
}
a.course_list_link:active {
background-color: white;
}
a.course_list_link:hover p.description {
color: black !important;
}
.course_list_link .thumbnail {
background-color: grey;
background-size: cover; /* Guarantees your background always fits the thumbnail size, no matter its aspect ratio */
height: 150px;
}
.course_list_link .play-button {
opacity: 0.5;
height: inherit;
width: inherit;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
}
.course_list_link:hover .play-button {
background-image: url('https://www.drury.edu/images/socialmediaicons/play_button.png');
}
.course_list_link .content-area {
margin: 5px;
}
.course_list_link h2 {
color: black;
font-weight: 500;
font-size: 18px;
margin: 0;
}
.course_list_link p.description {
margin: 0;
margin-bottom: 5px;
font-size: 14px;
color: grey !important;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: black;
}
.metadata {
font-size: 12px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.metadata .skill {
color: grey;
}
.metadata .date {
color: grey;
}
.metadata .views {
color: grey;
}
.metadata .subject {
font-weight: bold;
color: grey;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<a class="course_list_link" href="#">
<div class="thumbnail" style="background-image: url('https://img-aws.ehowcdn.com/560x560p/photos.demandstudios.com/getty/article/188/230/dv030463.jpg');"><!-- Set the bg image of this element in CSS -->
<div class="play-button"></div>
</div>
<div class="content-area">
<h2>Title</h2>
<p class="description">Description of the video, which may or may not be very long depending on the type of video, and what is chosen to display, and how many lines the space is allowed to occupy in the thumbnail.</p>
<div class="metadata">
<div class="column">
<div class="skill">Skill level</div>
<div class="views">Views</div>
</div>
<div>
<div class="date">Date</div>
</div>
<div>
<div class="subject">Subject That is Too Long And Will Inevitably Overflow to New Lines If Not Blocked by Some Sort of CSS Trick</div>
</div>
</div>
</div>
</a>
I also like to set the thumbnails in CSS. That way, even if your thumbnail changes size, it is always cropped at the same size within the HTML element. However, it's always good to ensure that images are not oversized so that the page loads quickly; therefore, making real thumbnails is always a good idea.
Just as a side note, it's general CSS good practice to use hyphens instead of underscores, so .course_list_link becomes .course-list-link.