How to modify CSS heart to insert inside image? - css

Question

So I have heart on CSS.
But now I want to modify it and add inside dynamic image.
Here is what I have:
.heart {
position: relative;
width: 100px;
height: 90px;
float: left;
width: 100px;
height: 90px;
overflow: hidden;
}
.heart.right {
left: auto;
right: 0;
}
.heart:before,
.heart:after {
position: absolute;
content: '';
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #fc2e5a;
border-radius: 50px 50px 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
Here is my fiddle: https://jsfiddle.net/9g1qswdd/

Answer 1

All the existing answers help you to place an image on top of a heart shape but not crop or cut it into a heart shape. The only existing answer that would help you achieve the latter is the clip-path model but that code produces a different output shape (its probably more a sample on how to do than a direct answer to your question).
For inserting an image in to the heart shape (I assume you mean cutting the image into a heart shape), don't use your existing approach. It is very tough because you that CSS method creates the shape by using two rotated elements. So, you'd have to go through the pain of - (a) split the image into two bits (b) place each half on each side (c) reverse rotate the images to nullify the effect the initial rotation that was set on the element (d) set background-position for each half of the image such that they match accurately etc. Even after going through all these troubles, you'd still face problems when the image is dynamic because setting background-position via percentage value work a lot more differently than what we think.
Use SVG: SVG is the recommended tool for creating such complex shapes with a background that is not a solid color.
With SVG, we can easily create complex shapes using the path element and also add an image as background or fill. SVGs are scalable and so are highly useful in responsive design. Using SVGs also allow us greater control over the shape itself.
Below is a heart shape that is created using SVG and having an image inserted into it as background.
svg {
height: 200px;
width: 200px;
}
path {
fill: url(#bg-image);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 100 100'>
<defs>
<pattern id='bg-image' width='1' height='1' patternUnits='objectBoundingBox'>
<image xlink:href='https://placeimg.com/100/100/nature/7' width='100' height='100' />
</pattern>
</defs>
<path d='M50,90 L20,60
A15,15 0 0,1 50,30
A15,15 0 0,1 80,60 z' />
</svg>
Below is a very short explanation of what the commands used in the path element's d attribute do. A more detailed explanation can be found in this MDN page:
M - Moves pen to the point specified by the coordinate given immediately after the command.
A - Draw an arc with the specified X and Y radius, ending at the point specified after command.
L - Draw a straight line from one specified point to another.
z - Close the path by drawing a straight line from path's last point to its first point.
You can also use a SVG based clip-path definition to clip the image like in the below snippet but the browser support for clip-path is lower.
img {
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 100 100' height='0' width='0'>
<defs>
<clipPath id='clipper' clipPathUnits='objectBoundingBox'>
<path d='M.50,.90 L.20,.60
A.15,.15 0 0,1 .50,.30
A.15,.15 0 0,1 .80,.60 z' />
</clipPath>
</defs>
</svg>
<img src='https://placeimg.com/100/100/nature/7' />
<img src='https://placeimg.com/200/200/nature/7' />

Answer 2

Assuming that the heart is to be placed on a solid background, you can hide selectively the image with several gradients placed on the pseudo elements.
This has the advantage of enabling the use of cover or contain on the background image size:
.heart2 {
width: 300px;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
position: relative;
border: solid 1px red;
}
.heart2:before {
content: '';
position: absolute;
width: 450px;
height: 450px;
left: -75px;
top: 75px;
transform: rotate(45deg);
background-image: linear-gradient(white, white), linear-gradient(white, white);
background-size: 50%;
background-repeat: no-repeat;
background-position: right top, left bottom;
}
.heart2:after {
position: absolute;
width: 114%;
height: 114%;
content: '';
left: -21px;
bottom: 70px;
transform: rotate(45deg);
background-image: radial-gradient(circle at center 170px, transparent 85px, white 70px), radial-gradient(circle at 170px center, transparent 85px, white 75px), linear-gradient(white, white);
background-size: 50%;
background-repeat: no-repeat;
background-position: right top, left bottom, left top;
}
<div class="heart2"></div>

Answer 3

your css should be
.heart-img{
position:absolute;
width:40px;
height:40px;
top:20px;
left:30px;
z-index:1000;
}
html
<div class="heart">
<img src="http://lorempixel.com/400/200/sports/1" class="heart-img">
</div>
https://jsfiddle.net/9g1qswdd/3/

Answer 4

If you want to add a dynamic image inside of the heart something like this should do the trick:
https://jsfiddle.net/kn1m081z/
I've added some simple CSS to set the size of the image like this:
.heart img
{
position:relative;
z-index:3;
left:34px;
top:20px;
width:30px;
height:30px;
background:#ff5500
}
I've given the image a background colour so you can see where the image is - once you dynamically add an image src to the image tag I have added you will see the dynamic image inside of the heart - this should be what you're after!

Answer 5

You can add background image on .heart and shift 5px bottom to the heart
.heart {
background-image: url('');
}
.heart:before,
.heart:after {
top: 5px;
}

Answer 6

I would suggest to make use of clip-path property of CSS. I tried making a dialog box:
.clip-path {
clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
https://jsfiddle.net/9g1qswdd/5/
similarly you can try making a heart with clip-path property. To make life easier, you can use this tool to do that for you: http://bennettfeely.com/clippy/

Answer 7

you have to make img class "relative" and heart class "absolute"
<style>
.img
{
position:relative;
background-image: url('');
}
.heart{position:absolute; top:50; left:50%;}
</style>
<div class="img"><div class="heart"></div></div>