Header images on this site I'm building are appearing too dark - I can't see any opacity is being applied - http://www.stayinblackpool.co.uk/ - any ideas what could be causing this?
Tried to make opacity 1.0
Opacity is being applied - in the form of background alpha key. Here is your markup:
<div class="featured-image">
<img src="http://www.stayinblackpool.co.uk/wp-content/uploads/2019/02/header3.jpg">
<div class="overlay">
<div class="grid-mid">
<h1 class="page-title">Serviced Holiday Apartments in North Shore, Blackpool</h1>
</div>
</div>
</div>
and here's associated CSS:
.overlay {
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
If you notice background has rgba, 0.5 is causing 50% opacity. I would remove the background attribute completely.
Related
I'm trying to blur the edges of an image like the picture shown at https://stackoverflow.com/a/24953573.
I need to do this on a foreground image (not one set in css) because the img url is dynamically changed. But box-shadow seems to have no effect on a foreground image. Also I'm using the Bootstrap 4.3 img-fluid class.
In other words, the code at the SO post referenced above works, but the edges on this image are not blurred (css inline for simplicity):
<img src="/images/mypic.jpg"
class="img-fluid"
style="box-shadow: 0 0 5px 5px white inset;">
.img-fluid sets max-width: 100% and height:auto. I tried over-riding these with specific values (which I don't want to do to maintain a responsive image), but it had no effect either.
You need to wrap img tag by div element with class name of .img-blur so use the :after pseudo-element can be used to insert some content after the content of an element.
.img-blur{
position: relative;
display: inline-block;
}
.img-blur:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 10px 10px #ffffff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="container">
<div class="row" >
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/ffff22">
</div>
</div>
<div class="col-4 my-3">
<div class="img-blur">
<img class="img-fluid" src="https://via.placeholder.com/400x400/22ff22">
</div>
</div>
</div>
</div>
There is a problem with style images with inset.
But you have 2 alternatives to do this. You can add a container with position relative and inside put img with class img-fluid and div with positon absolute to this container.
The second option is to set a container with position relative and img inside and style that container with pseudo-class ::after.
If you will do that it works but there will be a problem with the right box-shadow that if img is smaller than a container. You can fix these if you will use some JS code.
I made an example with jQuery ( cause you are using bootstrap and bootstrap is using jquery).
https://codesandbox.io/s/flamboyant-wing-z9lhm
Unfortunally, CSS 'Inset' Box shadows don't work on img tags. To workaround this, you have a few couple options, for example, is possible wrap the image on a div tag and use a pseudo-element to apply the box-shadow on it.
The problem here is that, as standard, the div tag is a "Block" element, and as so will cover the entire parent width. You could fix this applying a display: inline-block or a float: left property. Perhaps is not the best "standard-compliant", but will work on this case. I attach a example with this concept below:
div {
position: relative;
display: inline-block;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 5px 5px white inset;
}
<div>
<img src="https://picsum.photos/200/300" class="img-fluid">
</div>
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Can I set background image and opacity in the same property?
(15 answers)
Closed 3 years ago.
I have the following code and I would like to decrease the brightness of the image so that I can color the text-white.
However, the brightness filter carries onto the text. I've tried making an adjustment to the z-index, but it is not working. Can someone please provide me with a solution?
.jumbotron {
background-size: cover;
background-position: center;
width: 100%;
filter: brightness(80%);
z-index: -1;
}
.z-index {
color: white;
}
<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);">
<div class="text-center py-5 px-4 z-index">
<div>
<h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
<p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!
</p>
</div>
</div>
</div>
The structure of your HTML tags makes it difficult to achieve your goal. I would
Create a div giving it a class container that takes position: relative.
Take out the text div z-index from the image div jumbotron and put both the divs in container div.
Set the size of the image by giving this value to the image div, width: 100%; height: 120px;
Then give the text containing div position: absolute to float it and also give it top: 0; left: 0; to manually place the texts on top of the image div.
This way, the text div won't be affected when the image div is styled.
.container {
position: relative;
}
.jumbotron {
background-size: cover;
background-position: center;
width: 100%;
height: 120px;
filter: brightness(60%);
}
.z-index {
color: white;
position: absolute;
top: 0;
left: 0;
}
<div class="container">
<div class="jumbotron card card-image" style="background-image: url(http://mediad.publicbroadcasting.net/p/wamc/files/201609/codingsnippet.jpg);"></div>
<div class="text-center py-5 px-4 z-index">
<h2 class="card-title pt-3 mb-5 font-bold">E-commerce and Blogging website Experts</h2>
<p class="mx-5 mb-5">Do you need to increase traffic to your website? Do you want to increase sales on your e-commerce store? We're here to help you in that regard!</p>
</div>
</div>
I need to close the gap following a CSS transform: translateY(-50%) so that content flows on naturally.
I have tried other methods but have been unable to move the element up by 50% of its own height. Negative margin as a percentage is based on the height of the window so this doesn't seem like an option, nor can I set a negative margin on the following element as it needs to be based on the height of the header.
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS Fiddle:
https://jsfiddle.net/robertirish/tyh18orq/16/
It may be that this is only possible using Javascript but it would be great to get it done with pure CSS as JS and media queries are a pain to implement.
Thanks in advance.
Instead of using transform: translateY(-50%), use margin-top: -25vh.This will place the .title-container in the same place, yet keep the .article-body flush below it:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
Please look at this fiddle:
http://jsfiddle.net/Smartix/98sdrnkk/
The :before css property doesn't seem to work on a bootstrap row.
In the example above a centered red line should be displayed in the bacground of the div with class myline.
apply your :after pseudo class to this rule instead (after col-xs-12) :
<div class="row myline">
<div class="col-xs-12 myline">
<p>A red line should appear in the background of this row</p>
<p>The line should span from the top of the row...</p>
<p>... till here. Why is there no line?</p>
</div>
</div>
LIVE DEMO
or just add a height value and it will work properly :
.myline:before {
content: '';
top: 0;
bottom: 0;
position: absolute;
width: 4px;
background-color: red;
left: 50%;
margin-left: -1.5px;
height: 100px;
}
Live Demo
I'm trying to produce a look for my mvc application that has a property from my model as a transparent background image then the title and a description as the text on the image, but I want the children of the div to not be transparent. I've looked around the internet, and have seen a few different ways to do it, like changing the background rgba to a certain value, but I can't seem to get it to work. Any help would be greatly appreciated. Thanks.
Here's my code
#foreach (var item in Model)
{
<div style="height: 250px; background-size: cover; opacity: .5; border-bottom: 3px solid #e3c340; background-image:url(#item.Image);background-size: 100% 100%; " class=" hidden-md hidden-lg img-responsive">
<div class="row" style=" background:rgba(56,255,255,0.1);;">
<h1 style="font-weight:bold;" >#item.Name </h1>
</div>
</div>
}
You can't make the background-image be semi-transparent if it isn't semi-transparent itself.
Lowering an elements opacity will do the same for it's children, which is quite logical, but can be frustrating at first.
Try this for example:
<div style="background-color: rgba(255, 0, 0, 0.5);">
<p>I am perfectly opaque!</p>
</div>
Here we set the background color to be semi-transparent.
If you want to do this with an image, you would need to put it on it's own layer like so:
<div style="position relative;">
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/some/path/image.jpg); background-size: cover; opacity: 0.5;"></div>
<p>I'm still opaque!</p>
</div>