div getting pushed around or not appearing by other divs - html

I have an animation for a div that looks like a heart and am trying to put some text next to the heart div when the animation finishes. I tried putting text in a div and positioning that next to the heart but the invisible part of the heart keeps pushing it around or sometimes the div with text isn't visible at all. some help would be appreciated. Here is the code:
body {
overflow: ;
}
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 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%;
z-index: 2;
}
#heart:after {
left: 0;
-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%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-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%;
}
50% {
left: 0;
z-index: 2;
-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%;
}
100% {
z-index: 2;
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<body>
<div id="heart"></div>
<div id="lol">#Forever Alone</div>


You possibly missed the { after . That is,
100%{
z-index:2;
}
#lol {
should be
100% {
z-index: 2;
}
}
#lol {
Hope it helps!


The weird formatting is because you just need to add another closing bracket after you're done declaring your #keyframes (just before #lol).
#heart {
position: relative;
width: 1000px;
height: 900px;
left: 300px;
top: 200px;
color: blue;
z-index: 2;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
animation-fill-mode: forwards;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 5000px 5000px 0 0;
border-radius: 5000px 5000px 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%;
z-index: 2;
}
#heart:after {
left: 0;
-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%;
z-index: 2;
}
#keyframes example {
0% {
position: absolute;
z-index: 2;
-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%;
}
50% {
left: 0;
z-index: 2;
-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%;
}
100% {
z-index: 2;
}
}
#lol {
position: absolute;
right: 100px;
top: 200px;
font-family: Quicksand;
color: black;
}

Related

Image/Link is stuck to top-left, even when position is changed

This is my CSS and HTML.
div.musiclink {
position: relative;
}
a.music {
width: 258px;
height: 117px;
display: block;
background: deepskyblue url('MUSIC-cursive.png') center top no-repeat;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
a.music:hover {
background-image: url('MUSIC-cursive-hover.png');
}
a.store {
position: relative;
left: 500px;
top: 100px;
width: 220px;
height: 110px;
display: block;
background: deeppink url('STORE-cursive.png') center top no-repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
a.store:hover {
background-image: url('STORE-cursive-hover.png');
}
<div class="musiclink">
</div>
<div class="storelink">
</div>
The thing is I positioned everything successfully when I used images instead of href links, but now nothing is working the way I want it to. I don't want the images/links to move when I resize the browser.

Page turn Animation Effect

i need book page turn Animation Effect loading screen . i created for one turn i need continuous turn how to make book like loading.
I want to implement this page turn book effect.
for loading screen.
need to add new turn page after turn one page
.cssload-thecube {
width: 96px;
height: 69px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: #000;
}
.cssload {
width: 73px;
height: 73px;
margin: 0 auto;
margin-top: 49px;
position: relative;
background-color: rgb(43,160,199);
}
.cssload-thecube .cssload-cube {
position: relative;
}
.cssload-thecube .cssload-cube {
float: left;
width: 50%;
height: 50%;
position: relative;
transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
}
.cssload-thecube .cssload-cube:before {
content: "";
position: absolute;
top: -36px;
left: 15px;
width: 100%;
height: 100%;
background-color: rgb(43,160,199);
animation: cssload-fold-thecube 2.76s infinite linear both;
-o-animation: cssload-fold-thecube 2.76s infinite linear both;
-ms-animation: cssload-fold-thecube 2.76s infinite linear both;
-webkit-animation: cssload-fold-thecube 2.76s infinite linear both;
-moz-animation: cssload-fold-thecube 2.76s infinite linear both;
transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
}
.cssload-thecube .cssload-c2 {
transform: scale(1.1) rotateZ(90deg);
-o-transform: scale(1.1) rotateZ(90deg);
-ms-transform: scale(1.1) rotateZ(90deg);
-webkit-transform: scale(1.1) rotateZ(90deg);
-moz-transform: scale(1.1) rotateZ(90deg);
}
#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}
<div class="cssload-thecube">
<div class="cssload-cube cssload-c2"></div>
</div>

#keyframes cssload-fold-thecube {
0%, 50% {
transform: perspective(-180deg) rotateX(-136px);
opacity: 0;
}
50%,
100% {
transform: perspective(136px) rotateX(-180deg);
opacity: 1;
}
}

Transition of two divs on hover

Ok so i almost figured this one out but i'm stuck on the last bit.. Here's my code:
/* valuecanvas */
#wrappercs {
margin-top: 3px;
width: auto;
height: auto;
display: block;
float: right;
background: url(http://i67.tinypic.com/30ayjhg.jpg);
border: 2px solid;
}
#valuecanvas2 {
width: 640px;
height: 297px;
background: url(http://i65.tinypic.com/2kfu6f.jpg);
background-size: 100%;
background-repeat: no-repeat;
position: relative;
padding: 0px;
}
#valuecanvas2 li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#valuecanvass2 li,
#valuecanvas2 a {
height: 200px;
display: block;
}
/* Gains + gainscreaters */
#gains2 {
background: url(http://i64.tinypic.com/j73t55.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gains2:hover {
background: url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
#gains2:hover ~ #gainscreaters2 {
background: url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
-ms-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
#gainscreaters2 {
background: url(http://i67.tinypic.com/imqgx4.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gainscreaters2:hover {
background: url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(20px, -15px);
-moz-transform: translate(20px, -15px);
-o-transform: translate(20px, -15px);
-ms-transform: translate(20px, -15px);
transform: translate(20px, -15px);
}
#gainscreaters2:hover ~ #gains2 {
background: url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
/* jobs + services */
#jobs2 {
background: url(../customerpains/jobs.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#jobs2:hover {
background: url(../customerpains/jobskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transform: translate(15px, 0px);
-moz-transform: translate(15px, 0px);
-o-transform: translate(15px, 0px);
-ms-transform: translate(15px, 0px);
transform: translate(15px, 0px);
}
#services2:hover ~ #jobs2 {
background: url(../customerpains/jobskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 125px;
height: 213px;
left: 501px;
top: 50px !important;
-webkit-transform: translate(15px, 0px);
-moz-transform: translate(15px, 0px);
-o-transform: translate(15px, 0px);
-ms-transform: translate(15px, 0px);
transform: translate(15px, 0px);
}
#jobs2:hover ~ #services2 {
background: url(images/serviceskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transform: translate(-20px, 0px);
-moz-transform: translate(-20px, 0px);
-o-transform: translate(-20px, 0px);
-ms-transform: translate(-20px, 0px);
transform: translate(-20px, 0px);
}
#services2 {
background: url(images/services.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#services2:hover {
background: url(images/serviceskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 131px;
height: 290px !important;
left: 15px;
top: 8px !important;
-webkit-transform: translate(-20px, 0px);
-moz-transform: translate(-20px, 0px);
-o-transform: translate(-20px, 0px);
-ms-transform: translate(-20px, 0px);
transform: translate(-20px, 0px);
}
/* pains + painreleavers */
#pains2 {
background: url(../customerpains/pains.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 339px;
top: 151px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#pains2:hover {
background: url(../customerpains/painskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 151px !important;
-webkit-transform: translate(-10px, 15px);
-moz-transform: translate(-10pxpx, 15px);
-o-transform: translate(-10px, 15px);
-ms-transform: translate(-10px, 15px);
transform: translate(-10px, 15px);
}
#pains2:hover ~ #painreleavers2 {
background: url(images/painreleaverskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transform: translate(20px, 20px);
-moz-transform: translate(20px, 20px);
-o-transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
#painreleavers2 {
background: url(images/painreleavers.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
/* Safari */
transition: width 2s, height 2s, transform 2s;
}
#painreleavers2:hover {
background: url(images/painreleaverskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 150px;
left: 16px;
top: 151px !important;
-webkit-transform: translate(20px, 20px);
-moz-transform: translate(20px, 20px);
-o-transform: translate(20px, 20px);
-ms-transform: translate(20px, 20px);
transform: translate(20px, 20px);
}
#painreleavers2:hover ~ #pains2 {
background: url(../customerpains/painskleur.png);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 151px !important;
-webkit-transform: translate(-10px, 15px);
-moz-transform: translate(-10pxpx, 15px);
-o-transform: translate(-10px, 15px);
-ms-transform: translate(-10px, 15px);
transform: translate(-10px, 15px);
}
<div id="wrappercs">
<ul id="valuecanvas2">
<li id="gains2"></li>
<li id="jobs2" ></li>
<li id="pains2" ></li>
<li id="gainscreaters2"></li>
<li id="services2"></li>
<li id="painreleavers2"></li>
</ul>
</div>
And here's my jsfiddle
If you hover on the "gains" the transition works for the "gainscreators" as well. but for some reason it doesn't work the other way around.. i thought it maybe was a one way thing so i tried to let out the #gains2:hover ~ #gainscreaters2 but with no success either.
am i missing something?

You can not select preceding elements using CSS. Instead, put them both inside another ul with id as below
HTML:
<div id="wrappercs">
<ul id="valuecanvas2">
<li>
<ul id="gainsAnimation">
<li id="gains2"></li>
<li id="gainscreaters2"></li>
</ul>
</li>
<li id="jobs2" ></li>
<li id="pains2" ></li>
<li id="services2"></li>
<li id="painreleavers2"></li>
</ul>
</div>
CSS:
/* Gains + gainscreaters */
#gains2 {
background:url(http://i64.tinypic.com/j73t55.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
#gainsAnimation:hover #gains2 {
background:url(http://i65.tinypic.com/14433ad.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 245px;
height: 143px;
left: 338px;
top: 7px !important;
-webkit-transform: translate(-15px, -20px);
-moz-transform: translate(-15px, -20px);
-o-transform: translate(-15px, -20px);
-ms-transform: translate(-15px, -20px);
transform: translate(-15px, -20px);
}
#gainsAnimation:hover #gainscreaters2{
background:url(http://i64.tinypic.com/micsw5.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transform: translate(15px, -15px);
-moz-transform: translate(15px, -15px);
-o-transform: translate(15px, -15px);
-ms-transform: translate(15px, -15px);
transform: translate(15px, -15px);
}
#gainscreaters2 {
background: url(http://i67.tinypic.com/imqgx4.jpg);
background-size: 100%;
background-repeat: no-repeat;
width: 286px;
height: 139px;
left: 16px;
top: 7px !important;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
transition: width 2s, height 2s, transform 2s;
}
Fiddle: https://jsfiddle.net/tjjc4vxo/1/

Image (child of div) but outside of it, to not activate the hover effect

So what i want is: when cursor goes over the image (diamond), no to activate the hover of the octagon.
Here is the example:
http://codepen.io/Chrez/pen/yYajGo
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
CCS:
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
}

Add pointer-events: none; to .diamond
codepen
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
pointer-events: none;
}
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>

Placing an image centrally over another image with responsive width and height

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/