How to place an image centrally over another image?
I tried the answers from so many similar questions, but none of them work for me.
Basically I need the 2 images to become 1 and
it MUST be RESPONSIVE(so the size changes automatically when different screen size devices access the web page.)
The heart and ring should remain the same position to each other when user resize his or her screen(or web page window size etc.)
I am trying to use css to draw both the ring and the heart, but it is okay if you really need the picture to replace the ring or heart.
Here is my code, I have been working on it for hours but haven't got any good luck.
http://jsfiddle.net/4u6tfacw/
Thank you.
Here is my code
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
#logo {
width: 50%;
height: 50%;
}
#heart {
display: block;
position: absolute;
top: 70px;
left: 30px;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
width: 220px;
height: 220px;
padding: 8px;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Well, here is my attempt to satisfy the requirements of the question — which is not only about putting an image/element over another one, but about achieving that in a responsive manner.
Key points
Using a percentage value on bottom padding to make elements' heights respect their width1.
Using percentage values on top, right, left, bottom offsets as well as width and height properties2.
Using a high value in pixels on border-radius instead of percentage — for instance 1000px.
And number four... well, the last step is trial and error!
Example on JSFiddle.
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
#logo {
width: 50%;
/* height: 50%; */
position: relative;
}
#logo:after {
content: "";
display: block;
padding-bottom: 70%;
}
#heart {
position: absolute;
top: 26%;
left: 35%;
z-index: 1;
width: 70%;
height: 100%;
}
#heart-container {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 70%;
/* height: 70%; */
border-radius: 50%;
behavior: url(PIE.htc);
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart-container:after {
content: "";
display: block;
padding-bottom: 100%;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 0;
top: 0;
width: 39.130434782608695652173913043478%;
height: 56.521739130434782608695652173913%;
background: red;
-moz-border-radius: 1000px 1000px 0 0;
border-radius: 1000px 1000px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: -38.9%;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container"></div>
<div id="heart"></div>
</div>
1 Have a look at Responsive Container section of this topic.
2 To find exact values, we can position/size things in an absolute length — like px — and then just measure things relative to each other.
If you want to go responsive, you'd have to drop all the fixed (pixel) units and use percentages unless you plan to have several versions depending on the screen size and in that case you can use media queries.
So, the idea is to use percentages for paddings, margins, etc... and I've replaced the fixed width/height definitions you had with percentual padding, which made the circle responsive. See if you can do the same for the heart (I think using an image might save you a lot of time here).
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 18% 14%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 90px;
top: 0;
width: 90px;
height: 130px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart">
</div>
</div>
And the fiddle: http://jsfiddle.net/fzgd6cv8/
Let me know if you have trouble doing the same thing for the heart.
UPDATE
Here's my attempt for the heart, probably needs a bit of number tweaking:
#logo {
width: 50%;
height: 50%;
position: relative;
}
#heart {
display: block;
position: absolute;
margin: 20% 14% 0 9%;
z-index: 1;
width: 70%;
height: 70%;
}
#heart-container {
display: block;
position: absolute;
top: 0;
left: 0;
/*bottom:0;
right:0;*/
z-index: 1;
padding: 50%;
}
#heart-container {
border-radius: 50%;
behavior: url(PIE.htc);
padding: 50%;
background: #fff;
border: 2px solid #666;
color: #666;
text-align: center;
font: 32px Arial, sans-serif;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 60%;
top: 0;
width: 60%;
padding-top: 100%;
background: red;
-moz-border-radius: 150% 150% 0 0;
border-radius: 150% 150% 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
box-shadow: 10px 10px 100px #6d0019;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="logo">
<div id="heart-container">
</div>
<div id="heart"></div>
</div>
http://jsfiddle.net/fzgd6cv8/2/
Related
Here's what I want to achieve:
slanted div:
HTML:
<span class="container">
<span class="element">some dummy text</span>
</span>
CSS:
.container .element {
font-size: 24px;
background-color: gray;
padding: 5px;
position: relative;
}
.container .element:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(-20deg, 0deg);
-webkit-transform: skew(-20deg, 0deg);
transform: skew(-20deg, 0deg);
}
.container .element:after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: gray;
transform-origin: bottom left;
-ms-transform: skew(0deg, -1deg);
-webkit-transform: skew(0deg, -1deg);
transform: skew(0deg, -1deg);
}
https://jsfiddle.net/mktcany9/
I can't really make it like on the image, even though there is a lot of topics about similar divs.
This might help you.
The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowing parts are hidden with overflow:hidden;.
div {
position: relative;
display: inline-block;
padding: 1em 5em 1em 1em;
overflow: hidden;
color: #fff;
}
div:after {
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: skew(-45deg);
-ms-transform: skew(-45deg);
transform: skew(-45deg);
z-index: -1;
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
}
body {
background: #fff;
}
<div>slanted div text</div>
<div>
slanted div text<br/> on several lines<br/> an other line
</div>
<div>wider slanted div text with more text inside</div>
I am having quite a hard time trying to get a folded corner spread over the entire surface of my panel.
I don't want to set up a specific size for the folded corner as I want it to cover the entire surface, whatever the size of the panel (as it would show on mobile, tablet or desktop.
I can't figure out an easy solution to achieve this.
Here is my code :
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap:hover {
width: 120px;
height: 120px;
}
.amg-corner-button_wrap:hover div {
width: 120px;
height: 120px;
}
.amg-corner-button {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #46982b;
-webkit-transition: width 300ms, height 300ms;
-moz-transition: width 300ms, height 300ms;
-ms-transition: width 300ms, height 300ms;
-o-transition: width 300ms, height 300ms;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
}
.amg-corner-button:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 0 120px 120px;
border-style: solid;
border-color: #46982b #fff;
}
.amg-corner-button_text {
font-size: 14px;
font-size: 1.4rem;
width: 120px;
position: absolute;
top: 60px;
right: 0;
left: 0;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform-origin: center top center;
-moz-transform-origin: center top center;
-ms-transform-origin: center top center;
-o-transform-origin: center top center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
text-align: center;
color: #ffffff;
}
<div class="panel panel-default1">
<div class="panel-body">
<div class='amg-corner-button_wrap'>
<div class='amg-corner-button'></div>
<span class='amg-corner-button_text'>Text Goes Here</span>
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Any help on this would be very much appreciated.
Try using this as your css instead.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 100%;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
}
.amg-corner-button_wrap:hover {
width: 100%;
height: 100%;
}
.amg-corner-button_wrap:hover div {
width: 100%;
height: 100%;
}
.amg-corner-button {
display: block;
position: absolute;
bottom: 0;
right: 0;
width: 40px;
height: 40px;
background-color: #46982b;
-webkit-transition: width 300ms, height 300ms;
-moz-transition: width 300ms, height 300ms;
-ms-transition: width 300ms, height 300ms;
-o-transition: width 300ms, height 300ms;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
}
.amg-corner-button:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-width: 0 0 120px 120px;
border-style: solid;
border-color: #46982b #fff;
}
.amg-corner-button:hover::before {
border-width: 0;
}
.amg-corner-button_text {
font-size: 14px;
font-size: 1.4rem;
width: 120px;
position: absolute;
top: 60px;
right: 0;
left: 0;
-webkit-transform-origin: center top;
-moz-transform-origin: center top;
-ms-transform-origin: center top;
transform-origin: center top;
-webkit-transform-origin: center top center;
-moz-transform-origin: center top center;
-ms-transform-origin: center top center;
-o-transform-origin: center top center;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
text-align: center;
color: #ffffff;
}
We did two things. We updated .amg-corner-button_wrap:hover and .amg-corner-button_wrap:hover div to have a width and height of 100%. This way the panel would take up 100% of the panel.
The second change was adding:
.amg-corner-button:hover::before {
border-width: 0;
}
Without this we would be left with an extra triangle in panel. We need this triangle to create the green pocket shape we have in the bottom-right hand corner.
Following this question, I created a JSFiddle, but the output doesn't seem so good:
Here is the CSS, taken from the answer there:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
/* leave some space above */
}
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
#heart:before {
-webkit-transform: rotate(-45deg);
/* 45 degrees rotation counter clockwise */
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
/* Rotate it around the bottom-left corner */
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
/* placing the right part properly */
-webkit-transform: rotate(45deg);
/* rotating 45 degrees clockwise */
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
/* rotation is around bottom-right corner this time */
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
Did I miss something, or that love got old (it's about 2 years old)?
I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(
Here's the updated CSS that will fix your poor broken heart
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/
You missed the second selector for your second CSS rule.
The four rules should be:
#heart {}
#heart:before,
#heart:after {}
#heart:before [}
#heart:after {}
Here is the full demo:
#heart {
position: relative;
width: 100px;
height: 90px;
margin-top: 10px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
top: 0;
width: 52px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
}
#heart:before {
left: 50px;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
#heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
<div id="heart"></div>
Looks like you missed one of the steps. It isn't very obvious in the other answer.
You need a copy of
#heart:before {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
for #heart:after. So you need to add the following and it works (JSFiddle)
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 52px;
height: 80px;
background: red;
/* assign a nice red color */
border-radius: 50px 50px 0 0;
/* make the top edge round */
}
I like to center a CSS3 hexagon inside a div (have a look on the Screenshot below). I use the Foundation Framework, so the Hexagon is wrapped by a column-wrapper (in these case with the class "warpper").
My CSS:
.wrapper {
width: 1000px;
}
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px 0;
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 346.4102px;
background-position: center;
}
.hexTop,
.hexBottom {
position: absolute;
z-index: 1;
width: 212.13px;
height: 212.13px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 43.93px;
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
content: "";
position: absolute;
width: 300.0000px;
height: 173.20508075688775px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
transform: rotate(45deg) scaleY(1.7321) translateY(-86.6025px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexTop {
top: -106.0660px;
}
.hexTop:after {
background-position: center top;
}
.hexBottom {
bottom: -106.0660px;
}
.hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.0000px;
left: 0;
width: 300.0000px;
height: 173.2051px;
z-index: 2;
background: inherit;
}
My Full-Code on JSFiddle: http://jsfiddle.net/oa0j4ba8/1/
You can add auto to margin working demo
.hexagon {
position: relative;
width: 300px;
height: 173.21px;
margin: 86.60px auto;/*replace 0 with auto here*/
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 346.4102px;
background-position: center;
}
I would like to make a diamond shape with a image background. I can do it, the only problem is the image seems to rotate at the same time which i do not want. This also needs to work in ie8
fiddle:http://jsfiddle.net/zangief007/2bft2rcx/1/
#diamond {
width: 80px;
height: 80px;
background: purple;
margin: 3px 0 0 30px;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
Try removing the rotation and adding
#diamond:before, #diamond:after{
content: '';
border: 80px solid transparent;
position: absolute;
top: 50%;
margin-top: -80px;
z-index: -1;
}
#diamond:before {
border-right-color: #ccc;
border-left: none;
right: 50%;
}
#diamond:after {
border-left-color: #ccc;
border-right: none;
left: 50%;
}
Demo