Making Image Overlay more responsive? - html

Question

Is there any way of making this overlay more responsive? As in, making the overlay not cut off words, or go outside the image when resolution changes?
To further clarify: I am having three images next to each other in a row, per the W3CSS framework I am using, with three images under that, etc. Each image has an overlay with text links that direct to other pages, as shown in the example below. My only issue is responsiveness. As I want the images, and the overlays, to be responsive to screen size changes and resolution.
Thank you!
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.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;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="container">
<img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity">
<div class="overlay">
<div class="text">
Google Sample1<br>
GoogleSample2<br>
</div>
</div>
</div>
<div class="w3-container w3-white" style="height:50px;width:400px">
<h3>Example 1</h3>
</div>
</div>
</div>

Answer 1

To make sure, that your image is the same width as parent, you better use not only width = 100% property, but min-width = 100% and max-width = 100% too. If you want to keep the dimensions of image, you also should point height = auto, but in your case it should be height = auto !important. And for breaking long words in overlay, i have added the following rules:
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
Here is the working snippet:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
height: auto !important;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-all;
word-break: break-word;
hyphens: auto;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="container">
<img src="https://www.google.com/images/branding/product/ico/googleg_lodp.ico" alt="Google" style="height:300px;width:400px" class="w3-hover-opacity image"></a>
<div class="overlay">
<div class="text">
Google Sample1<br>
GoogleSample2<br>
</div>
</div>
</div>
<div class="w3-container w3-white" style="height:50px;width:400px">
<h3>Example 1</h3>
</div>
</div>

Answer 2

Background-size:cover is your friend when it comes to responsive images. With the image being the background, cover will position it so it fits the width/height automatically and will resize in the other direction that it doesn't fit so that it keeps the ratio. That way the image looks like it stays the same size the whole time, but it's responsive and doesn't get distorted.
.container {
position: relative;
width: 0%;
}
.w3-third{
background-image:url('http://www.fillmurray.com/200/300');
background-size:cover;
background-position:center center;
height:300px;
width:33.333%;
float:left;
display:block;
position:relative;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.w3-container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="w3-row-padding">
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
<div class="w3-third w3-container w3-margin-bottom">
<div class="overlay">
<div class="text">
Google Sample1<br>
Google Sample2<br>
</div>
</div>
</div>
</div>