Here is my demo: https://stackblitz.com/edit/js-6whwk2?file=style.css
here is the code
HTML
<div class="my-overlay" padding [hidden]="overlayHidden">
<ion-card class="card">
<ion-card-content>
Explore the App! See how everwell can help you achive your health goals.
</ion-card-content>
</ion-card>
<div class="circle" (click)="hideOverlay()"></div>
</div>
CSS
.card {
background-color: white;
}
.circle {
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.4);
justify-content: center;
flex-direction: column;
align-items: center;
border-radius: 100%;
display: flex;
height: 64px;
width: 64px;
float: right;
position: relative;
top: 100%;
transform: translateY(-100%);
}
.my-overlay {
position: fixed;
width: 100%;
height: 100%;
z-index: 20;
top: 0;
left: 0;
}
ion-card {
height: 9% !important;
--color: #434d65;
border-radius: 12px;
bottom: 64px;
position: absolute;
}
ion-card-content {
padding-top: 11px;
font-size: 14px !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 20px !important;
}
What I want to achieve is to be able to place my ion-card above the overlay, to be visible and not beneath it how it's now. I tried to remove this from the class .cirle (see below), but this leads me to another problem which is the position of the circle which I can, of course, make it with margin to be placed on the right bottom of the page, but that's not responsive and doesn't look like a good approach.
position: relative;
top: 100%;
transform: translateY(-100%);
I am new to coding and I am doing this as I learning project and I am struggling for a few days. If anyone has any suggestion I would really appreciate it. Thanks a lot.
Try using z-index: 1 :)
The z-index basically helps you determine the level of the item.
More here:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
or for an easier read, since you're new to coding: https://www.w3schools.com/cssref/pr_pos_z-index.asp
Related
I'm trying to implement this image:
Where, a div with text "Dog" is partially covering and blurring the image. So I tried this:
.profile {
background-image: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: black;
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
opacity: 60%;
backdrop-filter: blur(10px); // should do the trick but not working??
}
<body class="profile">
<div class="name">Dog</div>
</body>
As you can see, although the div has the right color/opacity, it is not blurring the part of the image it covers.
If backdrop-filter is applied on <div class="name"></div>, then shouldn't it take affect on the element behind it (which is <body class="profile">)? I'm confused as to what I am doing wrong. If anyone can point me in the right direction, I would greatly appreciate it. Thanks!
This works for me:
Change <body class="profile"> to something like <div class="profile">.
<body> is a special HTML element.
Remove opacity: 0.6. It makes the entire element translucent which isn't what you want.
Instead, change the background-color to rgba( 0, 0, 0, 0.6 ) - then the backdrop will be partially visible through this semitransparent background.
Also, I replaced width: 100% with right: 0; as width: 100% will be affected by box-sizing: which will trip you up as you work on the textual content of your HTML.
You also need to add position: relative; to .profile so that the .name's position: absolute works.
.profile {
width: 250px;
height: 250px;
position: relative;
background-image: url("https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg");
background-size: cover;
background-position: 0px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 15px;
padding-bottom: 15px;
background: rgba( 0, 0, 0, 0.6 );
backdrop-filter: blur(10px);
color: white;
text-align: center;
}
<div>
<div class="profile">
<div class="name">Dog</div>
</div>
</div>
You could set a transparent background using RGBA instead of using opacity to have the blur effect on the background. Also note that you are using an invalid order of HTML code.
The order is as follow:
<html>
<head>
<!-- All meta tags -->
</head>
<body>
<!-- All your elements such as divs, navs etc.. -->
</body>
</html>
So if we take your code, you would have something like this:
background-color: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
! For the sake of demonstration, I added position: relative to the profile class, this ensures your name element stays inside of the box. Remove that line if you are planning to copy the code below or don't want to have this.
.profile {
background: url(https://townofbeekmantown.com/wp-content/uploads/2019/06/2-dog.jpg);
width: 250px;
height: 250px;
background-size: cover;
background-position: 0px;
position: relative;
}
.name {
position: absolute;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.55);
color: white;
padding-top: 15px;
padding-bottom: 15px;
width: 100%;
text-align: center;
backdrop-filter: blur(15px); // should do the trick but not working??
}
<div class="profile">
<div class="name">Dog</div>
</div>
css stylings:
.products {
display: inline-block;
position: relative;
align-items: ;
margin-top: -4px;
}
.product-cell {
float: left;
display: inline-block;
width: 50%;
box-sizing: border-box;
}
.product-img {
position: relative;
}
.product-overlay {
background: rgba(0, 0, 0, 0.73);
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: 1;
}
p.product-name {
position: absolute;
top: 40%;
color: #fff;
z-index: 2;
left: 38%;
font-family: 'Kaushan Script', cursive;
transform: translate(-30%,40%);
font-size: 30px;
}
.product-list {
padding: 5px 0px 0px 10px;
}
HTML code:
I am using bootstrap.but for mobile i am not getting expected output as shown in the images below.for mobile i made .product-cell width as 100%. if it possible us js fiddle to explain.thanks for your valuable information.
i need like this :
.
but I am getting like this:
<div class="products">
<div class="product-cell">
<div class="product-img">
<img src="images/products-electronic.png" class="img-responsive" >
<div class="product-overlay"></div>
<p class="product-name">ELECTRONICS ENGINEERING</p>
</div>
</div>
You need to make your website responsive, to do that we use something called media queries which is basically just extra markup in your css syntax.
A great framework to use since you're just starting out with responsive design would be using Bootstrap, it's easily customised to fit the needs of your project.
This should also help give you a better understanding about how fluid grid systems are incorporated into your site.
Hope this helps!
I would like to show the image with a non glassy display. Similar to the following one,
I am using the image as it is. I would like to show that with matte finish.
normal image:
Matte finish:
I am not able find it online. May be I am not using the right search keywords. Could anyone help me with this?
Inside a container I did put an image with reduced contrast / brightness / saturation plus a little bit of blur (all these four effects made by CSS filter). The image could've be placed as the container background but I wanted to apply these filters so it went separated.
After it, there's a colored layer with transparency covering the whole area. The letter represents the page's content that can be anything.
UPDATE: multiple filters must be all in a row, like it is on this latest update:
body {
width: 100%;
height: 100vh;
margin: 0px;
font-family: Georgia, serif;
}
#container {
width: 100%;
height: 100%;
position: relative;
background-color: navy;
overflow: hidden;
}
#thepic {
width: 100vw;
height: 100vh;
object-fit: cover;
-webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
}
#color_layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: navy;
opacity: 0.3;
}
#content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
text-align: center;
}
h1 {
display: inline-block;
color: white;
text-shadow: 1px 2px 2px #000;
font-size: 4em;
font-weight: 100;
letter-spacing: 2px;
text-align: center;
vertical-align: middle;
}
#letter {
vertical-align: middle;
}
<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1> 書面</h1></span>
</div>
#freestock.tk - That's the idea I had in mind also.
Here's another way to do it with less markup:
img {
max-width: 100%;
height: auto;
}
.container {
position: relative;
z-index: -1;
}
.container:before {
content: "";
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
}
<div>
<h1>Original Image</h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
<div class="container" id="content">
<h1> With Transparent Overlay </h1>
<img src="http://i.imgur.com/WjbwTUH.jpg">
</div>
In this example, I put the image inside a container that is relatively positioned. The z-index is -1 so it will be behind the next layer.
Then I used a pseudo element that is absolutely positioned so it will stretch across the whole width of the container and cover the image. The positive z-index sets it on top of the first layer. Rather than setting an opacity, I used an rgba value for the background color. The first three numbers or the red, green, and blue values as usual, but the last number is a decimal between 0 and 1 that sets the opacity level. I made it a little darker than you probably want just so you can see the difference. You may also choose a different color to fit your image.
For reference: http://nicolasgallagher.com/css-background-image-hacks/
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I am trying to add a "plus sign" (its a .png file) to my portfolio section. My goal is to make this "plus sign" visible only when customers are hovering with mouse pointer over my projects but in the same time I want to keep the background-color property which I already set up.
However, my plus sign doesn't show up!? How can I do that???
On this website you can see the similar effect: http://bjorsberg.se/
Here is my JSFiddle: http://jsfiddle.net/L8HX7/
This is a part of my CSS (from JSFiddle) that needs to be fixed:
.plus{
width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -49px 0 0 -56px;
background: url(img/plus.png) center center no-repeat;
}
Here is example of a plus sign I want to add: http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Very-Basic-Plus-icon.png
Here is a really broken down example.
http://jsfiddle.net/sheriffderek/UVvWm/
CSS
.block {
position: relative; /* so the .plus knows what to be relative to */
display: block;
width: 10em;
height: 10em;
background-color: red;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0; left: 0;
}
.block:hover .overlay {
background-color: rgba(0,0,0,.5);
}
.block .plus {
display: none;
}
.block:hover .plus {
display: block;
}
/* to position the .plus */
.plus {
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
HTML
<a href="#"class="block">
<div class="overlay"></div>
<img class="plus" src="http://placehold.it/100x100" />
</a>
You could use an :after psuedo element for the overlay - but I wanted to keep it simple. Keep in mind that CSS declarations read from right to left .... "any .plus - do this, when .block:hover" etc ----
The style obviously has to be applied on hover.
Just replace the background-color in .projectshot a .over:hover{ by the appropriate background. You don’t need the div.plus at all, and neither do you need div.inner (you can remove those from the HTML!):
.projectshot a .over:hover{
position: absolute;
background: url(img/plus.png) center center no-repeat rgba(51, 51, 51, 0.6);
border-radius: 8px;
height: 150px;
width: 200px;
margin: 10px;
}
Here’s the updated Fiddle: http://jsfiddle.net/L8HX7/8/