I am creating a website for my college, but this image card thing messed up things, how can i make the background image of the card full rather than shown in the image.Please see through it
element.style {
}
.item_service_card {
position: relative;
overflow: hidden;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*, ::after, ::before {
box-sizing: border-box;
}
user agent stylesheet
div {
display: block;
}
.owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.owl-carousel, .owl-carousel .owl-item {
-webkit-tap-highlight-color: transparent;
position: relative;
}
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
line-height: 1.48;
font-weight: 400;
color: #000;
}
body {
line-height: 1;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
:root {
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
--font-family-sans-serif: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--font-family-monospace: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}
html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
user agent stylesheet
html {
color: -internal-root-color;
}
*, ::after, ::before {
box-sizing: border-box;
}
*, ::after, ::before {
box-sizing: border-box;
}the following code is my html code for the card
<div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 1900px;"><div class="owl-item active" style="width: 350px; margin-right: 30px;"><div class="item_service_card">
<div class="image_service">
<img src="assets/images/sycon.jpg" alt="">
</div>
<div class="describe_service">
<h4 class="name_service">
SYCon
</h4>
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. In risus magna, porta sit amet
orci ultrices, condimentum facilisis. </p>
</div>
<div class="overlay">
<h4 class="name_service">
<a href="sycon.html">SYCon</a>
</h4>
<h6>Guide:</h6>
<p><a href="single-team.html">Jak Rooney</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In risus magna, porta sit amet orci ultrices.
Praesent sed eros et sapien laoreet vehicula ac at arcu. Suspendisse et nulla sem.
Vestibulum condimentum risus vitae quam fringilla,
vitae congue sem mattis. Nulla accumsan nisl ac massa sodales gravida.</p>
</div>The details
I want to remove the half background in the image and make it full in the image area
