I'm having an issue with the image I added and its hover effect. The image seems to be leaving space on both sides of the screen, even though I've included background-size: cover and width:100% in my code.
Could someone please point out where I might have gone wrong?
Below are the codes I've used:
<div class="container">
<img
src="d8282202e8adb36a20e88d27ffc3b15e.jpg"
alt="headerimage"
class="image"
/>
<div class="overlay">
<div class="text"><h3>I AM RAJ JAIN</h3></div>
</div>
</div>
CSS codes:
.container {
position: relative;
width: 100%;
height: 350px;
}
.image {
display: block;
width: 100%;
height: 350px;
background-size: cover;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
position: absolute;
top: 50%;
left: 50%;
font-weight: 500;
letter-spacing: 0.15em;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}