I need to place this white section over the image. I could not add the diagonal shape here, that's the main problem
You can use background with :before option CSS on your div.
Make awhite SVG with a diagonal. After, write CSS width this SVG in background and place a opacity .5 or .25.
Example :
#divText{
position: relative;
&:before{
position: absolute;
top: 0;
left: 0;
background: url('path/yoursvg.svg');
width: 100%;
height: 100%;
opacity: .5; /* Or .25 */
}
}
With that, it should work. ;)
Related
I'm currently working on a blog layout and have hit a wall trying to figure out the best way to achieve the image alignment.
Each blog post has two images; a 'background' image set to .5 opacity and second 'top' image set to 1 opacity. The background image needs to sit under the top image.
So far I have got the layout to this point here http://dev.thefold.com.au/sandbox/staggered/portfolio-2-col.html but cannot figure out how to get the background image under the top image, leaving a 160px distance between the top image and the background image - in a way that can accommodate undetermined image heights. This html/css will eventually be used in a Wordpress theme so the solution needs to accommodate user added images that will have different heights.
An image of what I am trying to achieve is here http://dev.thefold.com.au/sandbox/staggered/reworked.png
Any ideas on how to do this?
Okay, see here:
.bk-effect {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
}
.bk-effect img:first-child {
position: relative;
z-index: 10;
}
.bk-effect img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: -160px; /* How much down of the original image */
right: -150px; /* How much right of the original image */
}
<div class="bk-effect">
<img src="https://placehold.it/400x300/000">
<img src="https://placehold.it/400x300/000">
</div>
To reuse it:
Copy the CSS over
Make a div with the class bk-effect
The first image used as the main image
The last image will be used as the background image
Currently, the images will be offset by 160px down and 150px to the right. You can change these values by altering the relevant line below.
Note: I added font-size: 0; line-height: 0; to remove any space under the image. This allows the offset to be exact, but it also means that no text will display inside the .bk-effect element.
For the link provided, change the code to:
.img-portfolio > a {
position: relative;
display: inline-block;
font-size: 0;
line-height: 0;
padding-right: 50px; /* How much right of the original image */
padding-bottom:160px; /* How much down of the original image */
width: 85%; /* Move the 85% to here */
}
.img-portfolio > a img:first-child {
position: relative;
z-index: 10;
box-sizing: content-box;
width: 100%; /* Remove the 85% here and move it up */
}
.img-portfolio > a img:last-child {
opacity: 0.5;
position: absolute;
z-index: 5;
bottom: 0;
right: 0;
box-sizing: content-box;
}
Note: You can't change the width of the main image, of the offset on the right side is going to be off. Instead, change the width of the a link.
I have a <div> with a background-image. When this is hovered over I would like another image to be placed on top partially transparent so the original image can be seen below.
My current idea involved adding a :hover state and changing the above images display state to visible along with necessary z-index values.
Could someone give me an example with jsfiddle.net implementation?
Why not use opacity?
The opacity CSS property specifies the transparency of an element, that is, the degree to which the background behind the element is overlaid.
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
.myTransparentImage{
opacity: 0;
}
.myTransparentImage:hover{
opacity: 0.6; /* it's in pourcentage */
}
This way, the transparent image, on hover, will appear at 60% opacity so you can still see the one below. So it is on top of the other image the whole time but only appears once hovered.
Here is an example in a fiddle: https://jsfiddle.net/5ob6n7nq/
Whipped up a quick example for you. Hit "Run code snippet" to see it in action.
.image-holder {
background: url('http://i.imgur.com/5ln9Vmi.jpg');
height: 500px;
width: 500px;
position: relative;
}
.image-holder::before {
content: '';
background: url('http://i.imgur.com/khYHDfJ.jpg');
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity .5s;
}
.image-holder:hover::before {
opacity: .5; /* amount of opacity to blend the two images */
}
<div class="image-holder">
</div>
If I correctly understand you: https://jsfiddle.net/3jabz7d3/
<div class="block1">
<div class="block2"></div>
</div>
.block1 {
position: relative;
width: 200px;
height: 200px;
background: url(http://writm.com/wp-content/uploads/2016/08/Cat-hd-wallpapers-1080x675.jpg) no-repeat center center;
background-size: cover;
}
.block2 {
position: absolute;
width: 100%;
height: 100%;
background: url(http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg) no-repeat center center;
background-size: cover;
display: none;
opacity: 0.3;
}
.block1:hover .block2{
display: block;
}
I've got a div with a background color and a transparent background image.
HTML
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
CSS
body{
background-color:white;
}
.watermark {
display: block;
position: relative;
}
.watermark::after {
content: "";
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
jsfiddle
I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.
Is there a way to do this?
Use an rgba color value and remove the opacity. For a white overlay you may use background:rgba(255,255,255, 0.5); while the last value (in this case 0.5) defines your transparency.
You can check this fiddle.
You can add a ::before pseudo-element to handle the background color, so that the ::after element has the image and opacity change, and the background-color can be unaffected. Note that the background-color of the actual .watermark element needs to be transparent, as the z-index:-1 will push the pseudo-elements behind the actual one.
.watermark {
width: 300px;
height: 100px;
display: block;
position: relative;
}
.watermark::before, .watermark::after {
content: "";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.watermark::before {
background:#C52F11;
}
.watermark::after {
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
}
<div class="watermark">
<div class="col-md-12">Something else</div>
<div class="col-md-12">Something more..</div>
<div class="col-md-12">Something at the end</div>
</div>
Updated fiddle
CSS for body , whatever you want
body{
background-color:white;
}
main div(.watermark) with background color, width and height of your choice
.watermark {
width: 538px;
height: 190px;
display: block;
position: relative;
background: #C52F11;
}
watermark after CSS , image with opacity
.watermark::after {
content: "";
background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat;
opacity: 0.4;
top: 0;
left: 0;
position: absolute;
z-index: 1;
width: 538px;
height: 190px;
}
I would recommend to use two divs. Its always a good idea to have two divs in overlapping stuffs with relative and absolute. Moreover, it adds long life to your code structure before you have to change it otherwise.
It's a trick:
Insert the image into the webpage anywhere(regardless of the size).
Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).
Take a snapshot of that image.
Remove that image and insert the snapped image where ever you want.
I have a div with a set size which I need to add a background image to. However I would like the image to fill the width of the div but be cropped to take up up say one third to a half of the height of the div. I've managed this using a pseudo element like so:
<div class="card-wrap bg-img-3"><div class="card">
<div class="top">
<h2 class="white">Heading</h2>
</div>
</div></div>
.bg-img-3:before {
content: '';
position: absolute;
width: 9.4cm;
height: 3cm;
z-index: -1;
background: url("./img/video.png");
}
But using this technique I don't seem to able to add a background colour to the bottom half of the div.
How can I use a cropped background image and background colour on the same div?
You can use after to set background color if you want
.bg-img-3:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -2;
background-color: #f00;
}
If you call the background property alone, you will generalize your command. Instead, be more specific and use background-image. This will tell the browser you'll want to use various properties for your background. You may want to remove the pseudo element ":after" as I believe it is not required in this method. Try the following in your style:
.bg-img-3 {
content: '';
position: absolute;
width: 9.4cm;
height: 3cm;
background-image: url("./img/video.png");
background-repeat: no-repeat;
background-size: 9.4cm 1.5cm;
background-color: #999;
}
Please let me know if this helps. Cheers.
I am looking for a way to horizontally repeat simple color background stripe, but only from the center of the page to the right. I am not sure how to do this.
There is no easy way to achieve this but not impossible, you can use CSS :after pseudo to do so.
Here, I am using :after pseudo element, and than we are using CSS Positioning technique to position the element 50% from the left and than with the negative z-index we push that to the back.
Demo
div {
height: 100px;
position: relative;
overflow: hidden;
}
div:after {
content: "";
left: 50%;
width: 50%;
background-image: url(http://virgo.unive.it/itadict/search/images/bullet.png);
position: absolute;
min-height: 16px;
z-index: -1;
top: 0;
}