Greetings to the community of stack overflow! I am facing a mundane issue with two elements (refer to code snippet below) that requires my attention. Any help or advice would be greatly appreciated.
I am aiming for the final output to resemble this:
Within the grey circular background, I have positioned social media links (.social__icon > img) relatively. Unfortunately, I am unable to load SVG files from the assets here. You can refer to the screenshot showcasing my attempts:
Regrettably, due to insufficient reputation, embedding screenshots is not an option for me at the moment. I hope there is another way for you to view it.
If not, envision it looking something like this:
Social Media Link Image margin-left:12px Social Media Text-Name also Relative Link Image with Hover and Animation Effects
They both should function as one in a row
For example,
I'm Facebook SVG icon in the grey ellipse 12px left Facebook
This is the desired outcome with:
.social__icon {
display: inline-flex; /* Changed */
align-items: center; /* Added */
Active mode: View image description here
ol,
ul,
li,
menu {
list-style: none;
}
a {
text-decoration: none;
}
.social__list {
display: flex;
flex-direction: column;
gap: 10px;
}
.social__icon {
display: inline-block;
text-align: center;
width: 26px;
height: 26px;
border-radius: 100%;
background: rgba(196, 196, 196, 0.5);
-webkit-transition: all 0.25s linear;
-moz-transition: all 0.25s linear;
-ms-transition: all 0.25s linear;
-o-transition: all 0.25s linear;
transition: all 0.25s linear;
}
.social__icon img {
vertical-align: middle;
}
.social__icon span {}
.social__icon:active {
background: #4B9200;
color: #4B9200;
}
.social__icon:hover {
animation: shake 500ms ease-in-out forwards;
}
@keyframes shake {
0% {
transform: rotate(2deg);
}
50% {
transform: rotate(-3deg);
}
70% {
transform: rotate(3deg);
}
100% {
transform: rotate(0deg);
}
}<div class="social">
<ul class="social__list">
<li>
<a class="social__icon" href="https://en-gb.facebook.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/fb.svg" alt="">
<span>Facebook</span>
</a>
</li>
<li>
<a class="social__icon" href="https://twitter.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/twtr.svg" alt="">
<span>Twitter</span>
</a>
</li>
<li>
<a class="social__icon" href="https://www.instagram.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/inst.svg" alt="">
<span>Instagram</span>
</a>
</li>
<li>
<a class="social__icon" href="https://www.youtube.com" target="_blank" rel="noopener">
<img src="../../assets/icons/social/youtube.svg" alt="">
<span>Youtube</span>
</a>
</li>
</ul>
</div>