Tengo unas dudas sobre CSS y busco sabiduría en el grupo, resulta que tengo un template HTML llamado Emily (https://madsparrow.me/emily/index.html) y necesito colocar un PNG transparente en cualquier parte del index (Son unos círculos que funcionarían como "Items"),
Se que es meter mano en el CSS, de hecho copie el código CSS que usa el tema en el menú y trate de replicarlo para el circulo:
/* Prueba de css para circulos */
.hamburger2 {
margin-right: 10;
margin-left: auto;
overflow: visible;
cursor: pointer;
z-index: 7;
border: 0;
transition-timing-function: linear;
transition-duration: .3s ease;
transition-property: opacity, -webkit-filter;
transition-property: opacity, filter;
transition-property: opacity, filter, -webkit-filter;
}
.hamburger2-label {
display: block;
font-family: 'Yantramanav', Arial;
font-size: 16px;
width: 100%;
height: auto;
position: relative;
top: 0;
left: -4em;
padding-right: 4em;
text-transform: uppercase;
line-height: 1.5em;
transition: color .3s ease .4s;
color: #151515;
}
.hamburger2-box {
position: relative;
margin-left: 1000px;
display: inline-block;
width: 150px;
height: 150px;
vertical-align: middle;
}
.hamburger2-inner:after,
.hamburger2-inner:before {
display: inherit;
margin-left: -100px;
content: '';
}
<div class="hamburger2-box">
<div class="hamburger2-inner">
<a href="sistemas.html" data-type="page-transition">
<img src="assets/images/boton_sistemas.png" alt="logo image">
</a>
</div>
</div>
Sin embargo, al cargar el index, me arrastra el logo y el botón de menú, tal como se ve en la imagen:
¿Como podría quedar un CSS para llamar a este PNG en la parte del index que quiera, sin afectar los otros elementos del sitio?,
Muchísimas gracias por cualquier ayuda.