I'm trying to remove the automatically generated container margin around this image. Below is the code I used to produce it. You can view the website here. I tried to add a margin and padding item to the body element, but it didn't resolve the issue.
.container {
position: relative;
width: 240px;
height: 240px;
}
.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: 0.85;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="./img/headshots/Exec_DMoon.jpg" width="240" height="240" alt="Photo of David Moon, Assistant Vice President for Financial Affairs" class="image">
<div class="overlay">
<div class="text"><b>David Moon</b> Assistant Vice President for Financial Affairs, <a class="usa-external_link" target="_blank" href="mailto:davidmoon826#gwmail.gwu.edu">Email</a></div>
</div>
</div>
This is the desired output:
What am I doing wrong?
The easiest fix for this, imo: wrap the items you want in a grid in a div and give the div display: flex and flex-wrap: wrap. Good luck!
Well, just add float: left to .container
(to achieve what you show under "this is the desired output")
The answer from Johannes almost worked, but it caused issues where text would reposition itself into the open gaps (see image below), instead of formatting below all the images.
The solution was to use display: inline-block; in .container, as Adrian recommended.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
height: 50%;
display: inline-block;
}
.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: 0.8;
}
.text {
color: white;
font-size: 25px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>
</body>
</html>
Related
I'm working on my portfolio site now. My projects are listed as clickable images, arranged into two columns. I want it that when a user hovers over an image, a solid block of color covers it with the project title in the center. Basically like this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade.
I had it working perfectly when I used row/column css classes, but since I've found that to not be very responsive (on mobile, the first column gets stacked on top of the other, which makes sense but that's not the order I want), I aligned the images with float and padding instead. Now, the hover effect/link stretches across the entire page, instead of being contained in the image area.
Here's my code for reference:
CSS
.container {
position: relative;
}
.image {
display: block;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 30px;
font-family: "Lato-Bold";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
#media screen and (min-width: 1025px) {
.image {
float: left;
width: 45%;
padding-left: 40px;
padding-right: 15px;
padding-bottom: 30px;
}
}
HTML
<div class = "container">
<img src="image name" class = "image">
<div class="overlay" style = "background-color: #color;">
<div class="text">project title</div>
</div>
</div>
How can I fix this? I've tried adding display: block to the .overlay class. I've tried making the .overlay class the same size as the image. I've also tried wrapping the link around the container class instead of the other way around like it is now. Nothing happens at all. I've also tried adjusting the container size, but that shrunk the images and stacked them into 1 column :(
Read about Responsive Images and Flexbox
Try the following code.
Note: I changed the HTML structure slightly.
.container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumb {
position: relative;
width: 50%;
}
.thumb img {
width: 100%;
}
.thumb:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0;
height: 100%;
width: 100%;
transition: .5s ease;
color: #000;
background: #fff;
}
.overlay .text {
position: absolute;
top: 50%;
transform: translate(-50%);
left: 50%;
text-align: center;
}
<div class="container">
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
<a href="#" class="thumb"><img src="https://loremflickr.com/320/240/dog" alt="" />
<div class="overlay">
<div class="text">project title</div>
</div>
</a>
</div>
I would like to include the mouseover 'Shop Now' effect on my images, I used this code:
<!DOCTYPE html>
<html>
<style>
.container {
style= "width:300px;height:300px;"
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
But when I run it on my site the scroll effect works for all 3 images at the same time. As shown below:
What can I do to solve this problem? I have been told previously that if I change the container size to just fit the image it should work, but how would I do that?
<!DOCTYPE html>
<html>
<style>
.container {
width:300px; /*edited here*/
height:300px;
/*this syntax is for html tags ONLY: style= "width:300px;height:300px;"*/
left: 0;
Right: 0;
}
.image {
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<div class="container">
<img src="img_avatar.png" alt="Avatar" class="image" >
<div class="middle">
<div class="text">Shop Now</div>
</div>
</div>
</html>
you used the wrong syntax for css. style= "width:300px;height:300px;" would be correct if it was in your html like so:
<div class = "container" style= "width:300px;height:300px;"></div>
but in css the style is already implied throught the tags so in css all you need to do is:
.container{
width:300px;
height:300px;
/*and so on*/
}
note: to avoid future problems learn about chrome's inspect tool. It will help you get a better understanding of your page layout and the size of elements and what not. https://developers.google.com/web/tools/chrome-devtools/inspect-styles/
Few short notes:
U cannot use style= "width:300px;height:300px;" within css. Within your example, your first line should be:
.container {
width:300px;
height:300px;
left:0;
Right:0;
}
You can only use the style-attribute within your html, but it is not nessesairy. If you do this, it will bypass your css:
<div class="container" style="width:300px;height:300px;">
You furthermore don't really have to call width and height both, since an image will scale automatically when it has one of these.
With all this being said, I believe this code solves your problem:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box;}
.container {
position: relative;
width: 50%;
width: 200px;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: green; /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
.container:hover .overlay {
opacity: 1;
}
</style>
</head>
<body>
<h2>Image Overlay Title</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
<div class="container">
<img src="https://www.w3schools.com/howto/img_avatar2.png" alt="Avatar" class="image">
<div class="overlay">Shop now</div>
</div>
</body>
</html>
I need to display a before and after images on mouse hover.I did edit the code from w3schools image effects.and come up with the CSS.With one Object Containing the before and after image. it works But when there two objects the 2nd Object "after" image displays .in the 1st Object "after" image place.since there can only be one class (Overlay) been used twice(because of the loop) .only the first class(overlay) place.will be used for all further "After" images.How do I get the after image to display with in its own place? thanks for
any information or advice
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
#foreach (var item in Model.Take(2))
{
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
<br/>
}
</div>
<style>
.containerImage {
position: relative;
width: 50%;
}
.image {
display: block;
width: 150px;
height: 150px;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 150px;
width: 150px;
opacity: 0;
transition: .5s ease;
}
.containerImage:hover .overlay {
opacity: 1;
}
.text {
display: block;
width: 150px;
height: 150px;
position: absolute;
top: 75px;
left: 75px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<div class="containerImage">
<img src="https://images.pexels.com/photos/52533/orange-fruit-vitamins-healthy-eating-52533.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
<img src="https://images.pexels.com/photos/566888/pexels-photo-566888.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="image">
<div class="overlay">
<img src="https://images.pexels.com/photos/46174/strawberries-berries-fruit-freshness-46174.jpeg?h=350&auto=compress&cs=tinysrgb" alt="Avatar" class="text">
</div>
<br/>
</div>
<hr/>
<p>The actual "after image" of the Orange but the Strawberry "after image" is showing</p>
<img src="https://images.pexels.com/photos/370014/pexels-photo-370014.jpeg?h=350&auto=compress&cs=tinysrgb"class="image" alt="Avatar">
This is because you have the containerImage with position relative and it is the only wrapper for all images.
This causes all the absolute elements to start at top:0, left:0, from the very first parent with position relative, in your case containerImage.
You can create multiple containerImage and bring it inside the foreach loop:
#foreach (var item in Model.Take(2)){
<div class="containerImage">
<img src="~/Img/#item.BeforePic" alt="Avatar" class="image">
<div class="overlay">
<img src="~/Img/#item.AfterPic" alt="Avatar" class="text">
</div>
</div>
}
And remove the br, since divs has a default display set to block.
Like this you don't have to change your CSS. Alternatively if you can't bring in the div containerImage. Just create another div (name it something like inner-wrapper and give it position relative).
I've created a working codepen.
Hope this helps you!
I have put an image with a hover overlay on my html website, i wanted three of them side by side but when i try to add another it goes underneath the previous one instead of beside it.
I have tried float:left however this messes up the hover overlay.
Any ideas?
Try putting this code on its own html page, to make sure no other styles are affecting it:
<!DOCTYPE html>
<html>
<head>
<title>Images test</title>
</head>
<style>
.container {
position: relative;
width: 33.3333%;
float: left;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
</style>
<body>
<h2>AUDIO SHOCK</h2>
<div class="container">
<img src="https://i2.wp.com/factschronicle.com/wp-content/uploads/2017/05/Bose-QuietComfort-35-Best-Wireless-Headphones-2017-min.jpg?fit=640%2C380&ssl=1" alt="Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
<div class="container">
<img src="https://static.bhphotovideo.com/explora/sites/default/files/styles/960/public/_shure-aonic-50-wireless-headphones_lifestyle-004-16x9.jpg?itok=GpxHyHuY" alt="Other Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
<div class="container">
<img src="https://nonstopnewcomer.com/wp-content/uploads/2017/02/headphones-1149205_640.jpg" alt="Other Headphones" class="image">
<div class="middle">
<div class="text">Product Details</div>
</div>
</div>
</body>
</html>
If you want them side by side, try
.image {
display: inline-block;
width: 33.3%
}
Not sure if you want the images side by side or not, so here's a general tip:
Some elements have display: block by default, and they won't ever be next to each other unless you specify. You can do this using display: inline-block; and specifying their width.
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>
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>
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>