i want help to add two image one over the other and position two images in center
<div class="im1"> </div>
.im1{
position: relative; top: 0; left: 0;
background-image:url("../images/img-shadow.png"),url("../images/img-1.png");
background-size:contain;
height:358px;
background-repeat: no-repeat,no-repeat;
}
background image is with shadow
i want it to be
This actually can be solved only with CSS.
I created an example here that generates the rotated border of the image.
Now you can insert any image inside :)
p.s of course you need to change the width and the height of the image inside to be the same as the frame diagonal. you can use CSS calculate for this.
body {
background-color: #F3F5F6;
}
.shadow:before,
.shadow:after {
content: "";
position: absolute;
z-index: -1;
height: 10%;
max-width: 90%;
width: 90%;
}
.shadow:before {
-webkit-transform: rotate(86deg);
left: -72px;
right: auto;
top: 118px;
box-shadow: 0 15px 5px rgba(0, 0, 0, 0.2);
}
.shadow:after {
-webkit-transform: rotate(84deg);
left: auto;
right: -92px;
bottom: 75px;
box-shadow: 0 -15px 5px rgba(0, 0, 0, 0.2);
}
.rotate {
-webkit-transform: rotate(45deg);
}
.box {
width: 200px;
height: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.pic-wrapper {
width: 100%;
height: 100%;
border: 10px solid #fff;
overflow: hidden;
}
.pic {
background-image: url('http://modernschoolec.com/wp-content/uploads/2015/04/11-980x408.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
/* (side)(sqrt(2)) */
width: 282px;
height: 282px;
-webkit-transform: rotate(-45deg);
position: relative;
top: -40px;
left: -40px;
}
<div class="box shadow rotate">
<div class="pic-wrapper">
<div class="pic"></div>
</div>
</div>
You could either give the shadow image a z-index of 100 and give the school image a z-index of 101 or set one to be position relative and one to be position absolute, but you will need media queries to make it responsive.
.im1{
background-image:url("../images/img-1.png"),url("../images/img-shadow.png");
height:358px;
background-repeat: no-repeat,no-repeat;
background-position: center , center;
}
Related
I have a div which contains an image and overlay:
<div class="container">
<div class="overlay"></div>
<img src="tablet.png" alt="tablet">
</div>
How can I make an overlay with shadow like ?
While it surely can be done via CSS or SVG, most likely that shadow is just a background image where the shadow is already drawn.
However, here's an example of how you could think of it in css:
.scene {
position: relative;
width: 200px;
height: 200px;
background: #60c18b;
overflow: hidden;
}
.object {
position: absolute;
width: 40px;
height: 45px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(https://proxy.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn.onlinewebfonts.com%2Fsvg%2Fimg_121330.png&f=1);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: top left;
}
.object:after, .object:before {
content: '';
display: block;
width: 100%;
height: 100px;
background: linear-gradient(rgba(0,0,0,0.3), transparent);
transform: skew(-45deg, 0deg);
transform-origin: top left;
position: absolute;
}
.object:before {
transform: translateY(2px) skew(0deg, -45deg);
transform-origin: top right;
width: 100px;
height: 100%;
position: absolute;
right: 0;
background: linear-gradient(to left, rgba(0,0,0,0.3), transparent);
}
<div class="scene">
<div class="object"></div>
</div>
Note that this is just for fun, it's not perfect and I wouldn't use this on a production site.
I'm trying to display a full screen background with multiple div's on top of it. When I'm resizing the browser, the divs also have to move. I want the divs to resize as well, so that they will stay at the same spot of the background image.
I've found a great solution on Stackoverflow, but the image isn't a full screen background. I've tried to adjust it but it doesn't seems to work. Who can help me?
.div-bg {
height: 100vmin;
width: 100vmin;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
}
.cities {
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg" style="background-image:url('https://image.ibb.co/f1qio5/insights_indiamap.jpg')">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
Just change .cities position from absolute to fixed...and instead of using vmin for width and height...use px or rem
.div-bg {
background-image: url('https://image.ibb.co/f1qio5/insights_indiamap.jpg');
height: 30rem;
width: 30rem;
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
position: relative;
background-size: auto;
}
.cities {
position: fixed;
border: 1px solid red;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: red;
}
.cities.Delhi {
position: absolute;
top: 27%;
left: 30%;
}
.cities.Bangalore {
position: absolute;
top: 85%;
left: 33%;
}
<div class="div-bg">
<div class="cities Delhi"></div>
<div class="cities Bangalore"></div>
</div>
I am trying to scale a div, but keep the inside element at the same position and the same size. To do that, I use transform: scale(value) on wrapper and transform: scale(1/value) on the inside div.
The problem is, that the inside div shifts when I change scale. That only happens if width/height of wrapper is odd or not whole. It does not happen for even widths/height of the wrapper.
My goal is to have many child elements of wrapper that scale alongside wrapper, but only one that does not.
Take a look at this example to see problem in action (hover to scale).
Example with no issue, inner element stay fixed on scale (height and width of container are even):
https://jsfiddle.net/o16rau6u/5/
.wrapper {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
Example with issue, the inner element move a little on scale (height and width of container are odd):
https://jsfiddle.net/o16rau6u/6/
.wrapper {
width: 201px;
height: 201px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
transform: scale(2);
}
.wrapper:hover .bg {
transform: scale(0.5);
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
How can I fix this issue and avoid my elements to move on scale whataver the size of container is ?
PS : The example used above is a very simplified example to show the issue and it's not the needed output or the code used. So we are not looking for another way to achieve the same behavior above as it's pretty easy to be done.
At the start I thought this is related to the calculation done by the browser and some rounding but it's seems to be bug. I have done a lot of test and whataver the value of the scale I use it always fail on odd value.
Here is a simple example with only scaleX
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner" style="transform:scaleX(0.5)">A</div>
</div>
As you can see below, the browser seems to add an extra pixel to inner div, but if you look more closely the inner div has a correct size but it's being translated by 1px to the right. So the hover block of Dev Tools is positioned correctly but not element itself! So it seems that the browser correctly calculated the position but did a wrong painting.
The same issue appear if we simply apply scale on the container. So it's not because the scale of inner element:
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box" style="transform:scaleX(2)">
<div class="inner">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(2)">
<div class="inner">A</div>
</div>
Even if we use floating value with scale where we can say there is some rouding and complex calculation, we have correct output with even values and issue with odd values:
Example with scale(1.25) & scale(1/1.25):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.25)">
<div class="inner" style="transform:scaleX(0.8)">A</div>
</div>
Example with scale(1.33) & scale(1/1.33):
body:after {
content: "";
position: absolute;
z-index: 999;
top: 0;
bottom: -200%;
width: 2px;
right: 50%;
margin-right: -1px;
background: rgba(0, 0, 0, 0.5);
}
.box {
width: 200px;
height: 100px;
margin: 50px auto;
background: blue;
position: relative;
}
.inner {
height: 20px;
width: 20px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left: -10px;
text-align: center;
color: #fff;
margin-top: -10px;
}
<div class="box">
<div class="inner">A</div>
</div>
<div class="box" style="transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
<div class="box" style="width:201px;transform:scaleX(1.33)">
<div class="inner" style="transform:scaleX(calc(1 / 1.33))">A</div>
</div>
Just don't put one of these divs into another, instead put both of them into the third div like this:
.wrapper {
width: 201px;
height: 201px;
position: relative;
}
.div-1 {
width: 100%;
height: 100%;
background-color: blue;
}
.div-1:hover {
transform: scale(2);
}
.div-2 {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
<div class="wrapper">
<div class="div-1"></div>
<div class="div-2"></div>
</div>
This way you just wont be needed to scale the inner div back to it's original height and width.
Browsers are notoriously bad at calculating stuff. There was a time when web developer math stated that (in some browsers) 33.33% times 3 was larger than 100% (but that was 14 years ago). Things have gotten much better since then, but don't rely on it. Doing resize tricks like this is not the way to go.
It seems to me that you want to resize the wrapper, while keeping the background size the same. To do so, you are using a complex transform trick, which (unprefixed) excludes 17% of all internet users. That is improper browser support and another reason not to do this.
This effect can be easily achieved with 99.99% browser support, working on all sizes.
.wrapper {
width: 402px;
height: 402px;
background-color: blue;
position: relative;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 201px;
left: 201px;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 4020px;
height: 4020px;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
If you want it to be responsive (you do!), this should do the trick:
* {padding: 0; margin: 0;}
html, body {height: 100%;}
.wrapper {
width: 50vw;
background-color: blue;
position: relative;
padding-bottom: 50%;
}
.bg {
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 25vw;
left: 25vw;
margin-top: -10px;
margin-left: -10px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Wiktionary_small.svg/350px-Wiktionary_small.svg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.wrapper:hover {
width: 500vw;
padding-bottom: 500%;
}
<div id="wrapper" class="wrapper">
<div id="bg" class="bg"></div>
</div>
This is what I'm looking for:
I have cropped an image with my html and css but have no idea how to place rectangle in it. I guess for animation I should use :hover option for my crop class in div.
My code: http://jsfiddle.net/8t2hmxmn/
I guess this will fit your needs, to adjust the height of the details element, just edit the height: value inside .details
html * {
box-sizing: border-box;
}
.crop {
background-image: url('http://cs628119.vk.me/v628119319/10059/Ag3oy3YU6wY.jpg');
width: 200px;
height: 150px;
background-position: center;
background-size: cover;
position: relative;
overflow: hidden;
}
.shape {
width: 200px;
height: 50px;
color: black;
}
.details {
position: absolute;
bottom: -100%;
left: 0;
right: 0;
height: 100%;
background: rgba(0, 0, 0, 0.5);
padding: 5px 10px;
transition: all 1s;
color: white;
}
.crop:hover > .details {
bottom: 0;
}
<div class="shape">
<div class="crop">
<div class="details">
Yes, this is cat!
</div>
</div>
</div>
I am currently attempting to create a two SVG overlay / masking like the image below
I have created a Svg for the overlay. As it stands i am trying to create two elements one for the green side and one for the blue side.
I have almost achieve the effect using the clip css property it seems to be working however i have noticed when i decrease the screen size both SVG masks overlay each other and i lose the effect.
Also i not 100% sure about the css property transform: rotate; as I want to add text inside each div
For what i am trying to achieve is this the best approach, if it not what is?
Below is a snippet of my code, i have also added a link below with my code.
.hero-overlay {
position: absolute;
top: 0;
height: 100%;
width: 100%;
-webkit-mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
mask: url("https://dl.dropboxusercontent.com/u/58412455/circle-mask.svg") no-repeat center center;
clip: rect(0px, 580px, 500px, 0px); }
.mask-left {
background-color: red; }
.mask-right {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background-color: blue; }
http://jsfiddle.net/newkidontheblock/72dL79bd/
You can also use css to achieve this using box-shadow
.container {
background: url(https://unsplash.imgix.net/photo-1425036458755-dc303a604201?q=75&fm=jpg&w=1080&fit=max&s=d8d14b1bb37691447e6cf7d4f5a16112) no-repeat;
position: Relative;
width: 100%;
height: 300px;
background-size: cover
}
.left,
.right {
position: absolute;
width: 49.5%;
left: 0;
height: 100%;
background: transparent;
overflow: hidden;
}
.right {
right: 0;
left: auto;
}
.left:before,
.right:before {
content: '';
background: transparent;
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
top: 50%;
transform: translatey(-50%);
}
.left:before {
left: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 170, 177, 0.90)
}
.right:before {
right: calc(100% - 47px);
box-shadow: 0px 0px 0px 391px rgba(0, 179, 220, 0.90);
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>