'How overlap an image over a circle?
This is the circular effect I trying to reproduce. There is a grey circle and a animated spinning red reticle when hover over the picture.
I try with border-radius but didnt work.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
width: 111px;
height: 111px;
border-radius: 100%;
background-color: black;
background-position: 0px -555px;
}
.bg-Black_Panther {
width: 73px;
height: 111px;
background-position: 0px -777px;
}
.bg-Black_Widow {
width: 73px;
height: 111px;
background-position: 0px -888px;
}
.bg-Bullseye {
width: 73px;
height: 111px;
background-position: 0px -999px;
}
.bg-Cable {
width: 73px;
height: 111px;
background-position: 0px -1110px;
}
.bg-Captain_America {
width: 73px;
height: 111px;
background-position: 0px -1221px;
}
.bg-Captain_Marvel {
width: 73px;
height: 111px;
background-position: 0px -1332px;
}
.bg-Carnage {
width: 73px;
height: 111px;
background-position: 0px -1443px;
}<div class="container">
<div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
<div>
<i class="sprite bg-Black_Panther"></i>
<b>Black Panther</b>
</div>
<div>
<i class="sprite bg-Black_Widow"></i>
<b>Black Widow</b>
</div>
<div>
<i class="sprite bg-Bullseye"></i>
<b>Bullseye</b>
</div>
<div>
<i class="sprite bg-Cable"></i>
<b>Cable</b>
</div>
<div>
<i class="sprite bg-Captain_America"></i>
<b>Captain America</b>
</div>
<div>
<i class="sprite bg-Captain_Marvel"></i>
<b>Captain Marvel</b>
</div>
<div>
<i class="sprite bg-Carnage"></i>
<b>Carnage</b>
</div>
</div>Solution 1:[1]
Sorry I cleaned it up a bit before working on it but I think positioning is the way to go.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>Solution 2:[2]
You should use two separate img with transparent png.
Also, using CSS from here endless rotation you may animate the red circle.
Here is a working example
body {
background-color: black;
}
.character-container img {
position: absolute;
}
.circle {
top: 50px;
left: 30px;
}
.character {
left: 37px;
top: 26px;
}
/* FROM https://stackoverflow.com/questions/6410730/how-to-do-a-webkit-css-endless-rotation-animation */
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 20s linear infinite;
-moz-animation: rotating 20s linear infinite;
-ms-animation: rotating 20s linear infinite;
-o-animation: rotating 20s linear infinite;
animation: rotating 20s linear infinite;
}<div class="character-container">
<img class="circle rotating" src="data:image/png;base64,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">
<img class="character" src="data:image/png;base64,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">
</div>Solution 3:[3]
You can create an additional wrapper around the image and make the position of inner image absolute with a negative top property to get this effect. Here is the code with just one item:
.container {
padding: 50px;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: #333;
color: #fff;
}
.hero {
text-align: center;
}
.circle {
width: 90px;
height: 90px;
border-radius: 100%;
background-color: black;
text-align: center;
position: relative;
border: 1px solid #ddd;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
}
.bg-Ant_Man {
position: absolute;
top: -20px;
left: 10px;
width: 111px;
height: 111px;
background-position: 0px -555px;
}
<div class="container">
<div class="hero">
<div class="circle">
<i class="sprite bg-Ant_Man"></i>
</div>
<b>Ant-Man</b>
</div>
</div>
Solution 4:[4]
Pseudo elements are my beloved when need minor decorating.
body {
background-color: #333;
}
img {
display: inline-block;
position: relative;
z-index: 9999;
}
.portrait {
position: relative;
}
.portait:after {
content: '';
display: block;
border: 3px solid #666;
width: 77px;
height: 77px;
border-radius: 50px;
position: absolute;
top: 37px;
left: 22px;
}<div class="portait">
<img src="https://ae01.alicdn.com/kf/HTB1VSHlRxjaK1RjSZFA762dLFXaO.png" alt="">
</div>Solution 5:[5]
Try this:
.container div::before {
content: "";
display: block;
position: absolute;
width: 72px;
height: 72px;
background: black;
border-radius: 50%;
z-index: 0;
top: 36px;
border: 1px solid white;
}
.container div, .container div * {
position: relative;
}
.bg-Ant_Man {
border-radius: 0;
background-color: none;
}Solution 6:[6]
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 150px 150px;
background-color: gray;
}
.sprite {
background-image: url(https://msf.gg/static/img/roster.abdfcf1.png);
background-repeat: no-repeat;
display: block;
position: absolute;
bottom: 0;
left: 5px;
z-index: 2;
}
.bg-Ant_Man {
width:80px;
height: 111px;
background-position: 0px -555px;
}
.single-hero {
width: 80px;
height: 80px;
background-color: black;
overflow: visible;
border-radius: 50%;
position: relative;
margin-top: 50px;
}
.single-hero:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 1;
opacity: 0;
background-image: url("https://cdn1.iconfinder.com/data/icons/art-design-and-development-vol-2/64/092-512.png");
background-position: center center;
background-size: cover;
animation: rotate 1s infinite linear;
transition: opacity .2s ease-in-out;
}
.single-hero:hover:after {
opacity: 1;
}
@keyframes rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}<div class="container">
<div>
<div class="single-hero">
<div class="hero-figure bg-Ant_Man"></div>
<i class="sprite bg-Ant_Man"></i>
<b>Ant-Man</b>
</div>
</div>Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | DanieleAlessandra |
| Solution 3 | Abhas Tandon |
| Solution 4 | sfy |
| Solution 5 | |
| Solution 6 | Animashaun Taofiq T. |