I am trying to make an image have green overlay and a title inside the image itself at the same time while trying to be responsive all at the same time, i have tried everything and i just cant make it work.
.headline-picture{
height: auto;
width: 100%;
background-image:
linear-gradient(
rgba(10, 158, 0, 0.5),
rgba(10, 158, 0, 0.5)
);
}
<div class="article-headline">
<img class="headline-picture" src="example image">
</div>
I think i understand the requirement... Have a look at the below snippet. Is this what you were looking for?
I've put the overlay as a separate element and is position:absolute.
.article-headline {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.headline-picture {
height: auto;
width: 100%;
}
.overlay {
background-color: rgba(0, 128, 0, 0.2);
position: absolute;
top: 0;
left: 0;
min-height: 100%;
width: 100%;
}
h1 {
position: absolute;
}
<div class="article-headline">
<img class="headline-picture" src="https://placekitten.com/640/360">
<div class="overlay"></div>
<h1>Title</h1>
</div>
Related
I am trying to achieve a backdrop blur effect that using a gradient. I have been able to apply the blur but not make it have a gradient. I am using Tailwind so any help with using those classes would be great.
This is the result I am looking for (or something close to it), where line isn't harsh.
Here is an example using plain CSS.
.content {
position: relative;
width: 800px;
height: 420px;
display: flex;
align-items: flex-end;
}
img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.overlay {
width: 100%;
-webkit-backdrop-filter: blur(20px);
height: 200px;
z-index: 10;
position: relative;
}
p {
text-align: center;
font-size: 18px;
}
<div class="content">
<img width="800" src="https://149351115.v2.pressablecdn.com/wp-content/uploads/2021/03/121220-Stackoverflow-Motivation-Alex-Francis-2048x1075.jpg" />
<div class="overlay">
<p>hello world</p>
</div>
</div>
I was able to solve this by adding a mask to the div.
-webkit-mask: -webkit-gradient(
linear,
left 45%,
left 0%,
from(rgba(0, 0, 0, 1)),
to(rgba(0, 0, 0, 0))
);
Thanks to Temani Afif for the suggestion.
I need to have a second image align left of the text but layered on top of the background image. I am having some trouble figuring out what css I need to make this work. Currently everything I have tried messes with the text positioning or the background image.
Luckily, this is a personal project so there is no timeline but I would appreciate any help that could be given.
I just started learning web development this past year so it all still feels a little new to me.
.hero-full-container {
height: 100vh;
position: relative
}
.background-image-container {
background-size: cover;
background-repeat: no-repeat;
background-position: 50%
}
.white-text-container h1 {
color: #fff
}
.overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .3), transparent);
background-image: -o-linear-gradient(top, rgba(0, 0, 0, .3) 0, transparent 100%);
background-image: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, transparent);
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr="#4D000000", endColorstr="#00000000", GradientType=0)
}
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px
}
.row {
margin-left: -15px;
margin-right: -15px
}
.col-xs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px
}
.col-md-7 {
width: 58.33333%
}
.col-md-offset-1 {
margin-left: 8.33333%
}
.hero-full-wrapper .text-content {
padding-top: 30%
}
<div class="hero-full-container background-image-container white-text-container" style="background-image:url('./assets/images/home_01.jpg')">
<div class="overlay-gradient"></div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-7 col-md-offset-1">
<div class="hero-full-wrapper">
<div class="text-content">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
<!--<p>Lorem ipsum</p>-->
</div>
</div>
</div>
</div>
</div>
</div>
I don't undestand very well your question, but if you want to have a background image and another image above this image, you can do this creating more div. Once you insert a background image, you can insert another div inside this div, e.g. :
<div class="main-container">
<div class="second-image">
<img src="link_to_your_image">
</div>
<div class="text-area">
<h1>William</h1>
<h1>Mark</h1>
<h1>Derichsweiler</h1>
</div>
</div>
and the for css, you can use flex property, setting the direction to flex-direction: row, e.g. :
*{
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.main-container {
width: 100%;
height: 100%;
background-image: url('link_to_your_image');
background-color: red;
display: flex;
flex-direction: row;
align-items: center;
}
.second-image, .text-area {
margin-left: 50px;
}
I hope this can help you, have a nice day.
Can someone point out why my image is not becoming darker? I am teaching myself some HTML and CSS and cant get this image to become darker.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
}
.image1 {
width: 100%;
background: rgba(0, 0, 0, 0.5);
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
The background is behind the image,if you want to make it darker you need to put an overlay top of it, and set transparent background there.
.carousel-content {
position: relative;
}
.overlay {
position: absolute;
left: 0;
top: 0;
height: 150px;
width: 275px;
background: rgba(0,0,0,0.5);
border-right: 2px dashed #fff;
}
<div class="carousel-content">
<img class="image1" src="http://via.placeholder.com/350x150/ff0000/ffffff" />
<div class="overlay"></div>
</div>
Or you can use css filter in modern browsers:
img {
filter: brightness(50%);
}
<img src="http://via.placeholder.com/350x150" />
You could also keep it the way you have it (assuming a black background) and just set the opacity for the image to fade it a bit and show the solid background color.
.carousel-content {
min-height: 100%;
background-position: center;
background-size: cover;
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 1);
}
.image1 {
width: 100%;
opacity: .5;
}
<div class="carousel-content">
<img class="image1" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" />
</div>
Here is my Fiddle:
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover img {
background-color: rgba(71, 161, 215, 0.5);
}
I don't understand why it doesn't work.
I want to change the background color of image on hover
It would be best to keep the html like it is since it's part of a wordpress project.
.
Update:
Thanks for all the help but none of this solution are what I really need.
Anyway since it's not working to put a hover on the image, will it be possible to create another div that will stay exacly on top of the rounded image and will have a transparent color background?
If you mean the background of the image, which is the div the image is in, then:
.member-img:hover {
background-color: rgba(71, 161, 215, 0.5);
}
would be the answer.
your sample image does not have a transparent background, if you use a transparent image like as google logo, it works as you want on hover:
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
/*background-color: red; */ /*just for test */
}
.member-img:hover img {
background-color: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" alt="" >
</div>
</div>
I'm not complete sure about what you exactly want. If you want the background to change color when hovering over it, try this in you css:
img {
border-radius: 50%;
width: 40%;
margin: 0 auto;
display: block;
}
.member-img:hover { background: rgba(71, 161, 215, 0.5);}
Do you want something like this:-
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover{
background-color: rgba(71, 161, 215, 0.5);
opacity: 0.3;
}
<div class="member">
<div class="member-img">
<img src="https://dummyimage.com/300" alt="" >
</div>
</div>
or
.member-img img {
border-radius: 50%;
width: 60%;
margin: 0 auto;
}
.member-img:hover{
background-color: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<img src="https://dummyimage.com/300" alt="" >
</div>
</div>
You can not change background-color of image but you can make use css filters. Filters make your image some effects like blur,saturated.
You can't do that for img but you can do that:-
.member-img {
border-radius: 50%;
width: 300px;
height: 300px;
display: block;
margin: 0 auto;
background: url('https://dummyimage.com/300') center center no-repeat;
}
.member-img:hover {
background: rgba(71, 161, 215, 0.5);
}
<div class="member">
<div class="member-img">
<!--img src="https://dummyimage.com/300" alt="" -->
</div>
</div>
My solution was to create another div with a transparent background-color on top of that image.
.hover {
border-radius: 50%; /* same rounded shape */
width: 210px; /* with the same with and height */
height: 210px;
display: none; /* we can make it display: block with js */
position: absolute;
top: -210px; /* position it exactly on the top of the image */
right: 0;
bottom: 0;
left: 0;
margin: auto;
color: #fff;
background-color: rgba(71, 161, 215, 0.3);
}
I have a div, .top-level-object, that overflows both of its containers, .tl-object-container and .header. My goal is to have .top-level-object visible and in front of all other elements in this scenario. I've tried z-indexing, but I couldn't get it to work. The image, for some reason is the only thing with this kind of behavior, because if you remove it, you will clearly see that the example works.
Side Note: I can't set position:absolute; on .top-level-object because other objects on the page depend on the space that it takes up for formatting.
What could I be missing?
.header {
height: 100px;
width: 100%;
overflow: visible;
background-color: rgba(127, 127, 127, 0.3);
}
.tl-object-container {
width: 400px;
height: 1px;
float: right;
overflow: visible;
background-color: rgba(127, 127, 127, 0.3);
}
.top-level-object {
height: 1000px;
width: 100%;
background-color: rgba(127, 127, 127, 0.3);
}
.object-covering-tl-object {
width: 100%;
background-color: blue;
}
.object-covering-tl-object img {
width: 100%;
height: auto;
display: block;
}
.object-not-being-covered-by-tl-object {
height: 100px;
width: 100%;
background-color: rgba(127, 127, 127, 0.3);
}
<div class="header">
<div class="tl-object-container">
<div class="top-level-object">
</div>
</div>
</div>
<div class="object-covering-tl-object">
<img src="http://www.jssor.com/img/home/01.jpg" alt="Random Image" />
</div>
<div class="object-not-being-covered-by-tl-object">
</div>
By using position: relative; you can then adjust z-index - the difference being that the position is adjusted based upon the position of the element if it were static, as opposed to being "absolute" to a parent element.