how can I achieve something like in the image below.
I have an image and I want to add a color overlay on the image but only on the image shape.
I tried to do something but I achieve overlay on all the div that holds the image...
Like the image below:
Here is an idea using mask where the trick is to consider the same image as the mask layer and the overlay will be cut following the image shape
.box {
background:#fff;
position:relative;
width:200px;
display:inline-block;
-webkit-mask:url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png) center/contain no-repeat;
}
img {
display:block;
max-width:100%;
}
.box:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
height:50%; /* adjust this */
background:rgba(255,0,0,0.5);
}
body {
background:#f2f2f2;
}
<div class="box">
<img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png">
</div>
<div class="box" style="width:100px;">
<img src="https://i.ibb.co/2ngRVZQ/Daco-2761771.png">
</div>
You can also optimize like below:
.box {
--img: url(https://i.ibb.co/2ngRVZQ/Daco-2761771.png);
background: #fff;
position: relative;
width: 200px;
display: inline-block;
background: var(--img) center/contain no-repeat;
-webkit-mask: var(--img) center/contain no-repeat;
}
img {
display: block;
max-width: 100%;
}
.box:before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: var(--h,50%); /* adjust this */
background: var(--c, rgba(255, 0, 0, 0.5));
}
.box:after {
content: "";
display: block;
padding-top: 150%; /*maintain the same ratio (adjust based on your real image) */
}
body {
background: #f2f2f2;
}
<div class="box"></div>
<div class="box" style="width:100px;--c:rgba(0,255,0,0.5);--img:url(https://i.ibb.co/3NVCq38/Daco-1325460.png);--h:70%"></div>
Related
As you can see, in the title block, only the upper half has background, I want the whole title block to have the same background. Of course, I can set background for the title block itself, but this way the background won't look continuous, as you can see in the fiddle.
Is there a way to achieve this with pure css?
.header {
width: 100%;
padding-top: 30%;
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size: cover;
position: relative;
}
.title {
position: absolute;
transform: translateY(-50%);
padding: 8px 24px;
font-size: 24px;
background: none;
border-radius: 50px;
border: 4px solid white;
left: 10%
}
body {
background-color: #eee
}
.title.b {
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size: contain
}
<div class="header">
<div class="title"> Title Title </div>
</div>
<div class="header" style="margin-top:60px">
<div class="title b">
Title Title
</div>
</div>
Fiddle: https://jsfiddle.net/s7pkr2w8/1/
Here is an idea using clipping and masking
.header {
padding-top: 30%;
position: relative; /* relative here !! **/
display:flex;
z-index:0;
}
.title {
font-size: 24px;
color:#fff;
border-radius: 50px;
margin:auto auto 0 10%; /* position the element using flexbox instead of absolute */
-webkit-mask:linear-gradient(#fff 0 0); /* clip the pseudo element to only the title shape*/
}
/* extra div needed for the white border*/
.title > div {
padding: 8px 24px;
border:4px solid #fff;
position:relative;
border-radius: inherit;
}
/**/
/* two pseudo element relative to the container having the same background
to have the continuous effect
*/
.title::before,
.header::before{
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background: url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%/cover;
}
.header::before {
clip-path:inset(0 0 20px 0); /* cut 20px from the bottom to be around the middle of the title */
}
body{
background-color:#eee
}
<div class="header">
<div class="title">
<div>Title Title</div>
</div>
</div>
you can try to set the background on a parent element or just event to the whole body:
body{
background:url('https://cchc-herald.org/images/discuss_cavatar/titleSampleBG.jpg') no-repeat 50% 50%;
background-size:cover;
}
I am trying to move a piece of text on a specific part of image using css sprites.But the background position I am applying doesn't seem to work. I have tried changing the background position but the text part(i.e. twitter, facebook) doesn't move to the correct place.
#fixedsocial {
background:url("../img/socials/icon.png") no-repeat;
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
text-indent:-9999px;
}
.facebookflat {
background-position: -200px 0;
height:50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
height:50px;
background-position: -400px 0;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat"> </div>
</div>
The reason it's not working is that you assign the background image to the container-div (#fixedsocial), and try to adjust the positioning on the inner-divs, which has no background to position. You need to rethink your CSS a bit, for one you have to assign the background where you actually want to use it.
Here's a fiddle: https://jsfiddle.net/j7kyhgmc/
#fixedsocial {
top:40%;
width:50px;
height: 100px;
position:fixed;
left: 0;
display: block;
z-index: 1000;
background-color: #eee;
}
.facebookflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -168px -161px;
background-size: 1430% 1430%;
height:50px;
width: 50px;
}
.facebookflat:hover {
cursor: pointer;
}
.twitterflat {
background: url("https://i.stack.imgur.com/LR6bK.png") no-repeat;
background-position: -430px -161px;
background-size: 1420% 1420%;
height:50px;
width: 50px;
}
.twitterflat:hover {
cursor: pointer;
}
<div id="fixedsocial">
<div class="facebookflat" id="shareBtn"></div>
<div class="twitterflat">
</div>
</div>
How to make a transference layer on an image which reduces the image light at the corner but not at the center of the image? I need the result exactly as shown below:
I have tried the below code:
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
<html>
<body>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</body>
</html>
Please help to do the required change to get the required output.
An absolutely positioned pseudo-element on a wrapping div and a sem-transparent box-shadow is one method.
body {
text-align: center;
}
.wrap {
display: inline-block;
position: relative;
overflow: hidden;
margin: 1em;
}
.wrap::after {
content: '';
position: absolute;
width: 80%;
height: 80%;
top: 10%;
left: 10%;
border-radius: 50%;
box-shadow: 0 0 0 200px rgba(0, 0, 255, 0.35);
z-index: 1;
}
img {
display: block;
}
<div class="wrap">
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
An absolutely positioned element in a wrapping div with a radial background is another method
.img {
position: relative;
float: left;
}
img {
display: block;
}
.overlay {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle, transparent 50%, rgba(0, 0, 255, 0.5) 50%);
}
<div class="img">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="200">
<div class="overlay"></div>
</div>
</div>
You have to wrap the image in a container and put an overlay div to can achieve the desired results
.img {
width: 250px;
position:relative;
}
img{
max-width:100%;
}
.overlay{
position: absolute;
background-color:rgba(0,0,0,0.7);
background: rgba(0,0,0,0.7); /* For browsers that do not support gradients */
background: -webkit-radial-gradient(circle,transparent 50%, rgba(0,0,255,0.7) 50%); /* Safari 5.1 to 6.0 */
height:100%;
width:100%;
left:0;
right:0;
top:0;
bottom:0;
}
<html>
<body>
<div class='img'>
<div class='overlay'></div>
<img src="http://zblogged.com/wp-content/uploads/2015/11/17.jpg" alt="Pineapple" width="300" height="300">
</div>
</body>
</html>
I am trying to create a div with a background image (background-size:cover) with this shape cut out in the center top of the div.
The div above the div I want to cut this shape out of has background-image:cover on it as well. I'm trying to do this with a CSS shape, moving the lower div up using a negative margin top, so the background image on the div above shows through the cut out shape.
Note: The shape has to look identical or almost identical to the image, as it is part of a site designed by someone else, and they are very specific with their designs.
Anyone out there know how to create this shape?
EDIT: #SZenC offered a really cool solution that I implemented, except it leaves me with colored shapes overlayed on top of background images. See image:
I need the light blue pattern to show through where the gray is, and the purple texture to show through where the white is. I'm not sure at this point if this is possible, at least with CSS.
The best solution using CSS would be to use some nested elements.
You could create a div (.pointy) with two other divs inside it (.curve-left & .curve-right).
The inner divs should be sided so that they each have half of the curve. So if your curve drops 10px and goes 20px horizontal, it's height should be 10px and the width 20px. Then give it a border radius in the top-left or top-right corner of 100%. Now the curve will go trough the entire div. You could then give it a gray background-color and the parent div white in the background. Then some simple CSS-tricks to center the .pointy-div and do the backgrounds, and voila, there is your curvy triangle-y thingy.
So example below.
#c1 {
position: relative;
width: 200px;
height: 190px;
overflow: hidden;
}
#c2 {
position: relative;
top: 0px;
width: 200px;
height: 200px;
background-color: gray;
}
.pointy {
position: absolute;
top: 0px;
left: 50%;
margin-left: -20px;
width: 40px;
height: 10px;
background-image: url("http://lorempixel.com/output/technics-q-c-200-200-4.jpg");
background-position:center bottom;
}
.pointy>.curve-left,
.pointy>.curve-right{
position:absolute;
background-color:red;
width:20px;
height:10px;
background-image:url("http://lorempixel.com/output/technics-q-c-200-200-1.jpg");
}
.pointy>.curve-left{
border-top-right-radius:100%;
background-position:120px 0;
left:0;
}
.pointy>.curve-right{
border-top-left-radius:100%;
background-position:80px 0;
right:0;
}
<div id="c1">
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" />
</div>
<div id="c2">
<div class="pointy">
<div class="curve-left"></div>
<div class="curve-right"></div>
</div>
<img src="http://lorempixel.com/output/technics-q-c-200-200-1.jpg" />
</div>
Here you could use a couple of pseudo elements with border radius to create that curved shape.
note there are multiple elements in this demo to show how this could be used in practice
.image {
height: 300px;
width: 80%;
background: url(http://lorempixel.com/900/500);
position: relative;
display: inline-block;
}
.shape {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background: url(http://lorempixel.com/900/400);
background-position: 0 60px;
}
.shape:before,
.shape:after {
content: "";
position: absolute;
background: inherit;
height: 100%;
top: 0;
width: 50%;
transform: translateY(-100%);
}
.shape:before {
left: 0;
border-radius: 0 50% 0 0;
background-position: 0 90px;
}
.shape:after {
left: 50%;
border-radius: 50% 0 0 0;
background-position: -100% 90px;
}
<div class="image">
<div class="shape"></div>
</div>
Another, more in practical approach (with responsiveness), would be something like:
.wrap{
width:100%;display:inline-block;
position:relative;
height:600px;
}
.wrap img:first-child{
top:0;z-index:5;
}
.wrap img:last-child{
top:40%;
}
.wrap img{
position:absolute;
height:50%;width:100%;
}
.wrap .splitter{
z-index:10;
position:absolute;
top:40%; width:100%;
height:10%;
}
.wrap .splitter:before, .wrap .splitter:after{
content:"";
position:absolute;
width:50%;
height:100%;
background-size:200% 500%;
border-radius: 0 100% 0 0;
}
.wrap .splitter:after{
left:50%;
background-position:-100% 0;
border-radius: 100% 0 0 0;
}
.wrap .partA:before, .wrap .partA:after{ background-image:url("http://lorempixel.com/450/250");}
<div class="wrap">
<img src="http://lorempixel.com/900/500"/>
<span class="splitter partA"></span>
<img src="http://lorempixel.com/450/250"/>
</div>
Hello I want to achieve similar to this image.
Here is my css code
*{
background:#444;
margin:0;
padding:0;
}
.display{
width:100%;
min-height:100%;
background:green;
position:fixed;
}
.one{
width:100%;
height:300px;
margin-top:-200px;
background:red;
transform: rotate(45deg);
}
.two{
width:100%;
height:450px;
margin-top:200px;
background:blue;
transform: rotate(45deg);
}
I've try to achieve similar positioning here is my Code is here
My question is - What could you suggest me to achieve similar positioning?
Is it good to use transform for 4 div images and positioning them?
Assuming this is a background, let's simplify it with a single HTML element.
Top and bottom background colors are a single gradient with two colors
left and right background colors are :before and :after pseudo elements rotated with transform: rotate
The before and after pseudo elements get z-index: 1. Elements that should be above them get position: relative and z-index: 2
Example
body {
background: #212121;
}
div {
background: #F00;
height: 500px;
width: 500px;
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #EB1249 0%, #EB1249 50%, #251F39 50%, #251F39 100%);
margin: 0 auto;
}
div:before {
content: '';
display: block;
position: absolute;
top: 0;
left: -70%;
transform: rotate(45deg);
background: #fce4ec;
width: 100%;
height: 100%;
z-index: 1;
}
div:after {
content: '';
display: block;
position: absolute;
top: 0;
right: -59.3%;
transform: rotate(45deg);
background: #F5B8A2;
width: 90%;
height: 100%;
z-index: 1;
}
<div></div>
This is pretty easy if you set the transform-origin to the corners of your boxes. Basically, instead of rotating from the middle, you can rotate from the corner. So You'd have two boxes at, for instance:
right : 200px;
bottom : 200px;
transform-origin : 100% 100%;
one rotated 45deg, the other -45deg. Then the other two at 190, 210 or whatever. Note that you also need -webkit-transform-origin, -ms-transform-origin, -moz-transform-origin, -o-transform-origin