Мобильная версияВ основном я M пытаюсь поместить, он фигурирует прямо под коробкой социальных сетей, чтобы кажется, что фигура удерживает социальные сечения на его плечах. Время, но это еще одно. в или вне. Пока, если я увеличиваюсь на рисунке, пойдет под социальные сети, в то время как, если я увеличиваю его полностью, полностью раскаивается. Заранее спасибо < /p>
(мне, возможно, придется сказать, что социальные сети и цифра находятся в контейнере, в котором используются только 64% экрана) < /p>
< /code>
Это был мой HTML (часть этого, конечно, так как у меня есть гораздо больше. Будем надеяться, что проблема не будет где -то еще)
Это мой CSS для этих элементов. < /p>
.footer {
display: flex;
position: relative;
justify-content: center;
align-items: center;
bottom:-45px;
/* margin-top: 287px; */
}
/*the social box*/
.socials a{
text-decoration: none;
}
.socials {
background-color: white;
display: flex;
margin: 10px;
border-radius: 10px;
border: 3px solid #edab20;
box-shadow: 2px 2px 25px rgba(0, 0, 0, 1);
transition: all 0.5s ease-in;
z-index:1;
}
.socials:hover {
box-shadow: 2px 2px 25px rgba(255, 255, 255, 1);
}
/*the social buttons*/
.fa-brands {
background-color: white;
color: #edab20;
width: 55px;
height: 55px;
line-height: 50px;
margin: 10px 10px 5px;
border-radius: 75px;
border: 2px solid #edab20;
text-align: center;
overflow: hidden;
line-height:55px;
align-content: center;
}
.socials a .fa-brands:hover {
transform:scale(1.3);
background-color: #edab20;
color: white;
border: 2px solid white;
}
@media (max-width: 500px) {
.socials {
flex-direction: column;
}
}
@media screen and (max-width: 1000px) {
#magicbox{bottom:50px;}
}
/*Images box in the footer*/
#magicbox {
position: relative;
overflow: visible;
width: 100%;
/*Optionally, set a min-height so the container is large enough */
min-height: 275px;
left:35%;
}
.magic{
position: absolute;
bottom:0;
opacity: 0;
width:30%;
transform: translateY(20px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
#image0.magic {
opacity: 1 !important;
transform: none !important;
}
/* When the appear class is added, fade in and slide to position */
.magic.appear {
opacity: 1;
transform: translateY(0);
}
#image1,#image2,#image3,#image4,#image5,#image6{
transform: rotate(1deg);
}
< /code>
Я уже пробовал много таких вещей, как левая: 50% и перевод: -50%, и это не работает все. < /p>
Это то, что происходит : < /p>
Как это увеличивается в < /p>
и это то, чего я пытаюсь достичь: < /p>
Как это Всегда должно быть (теперь он работает только на 100%)
Подробнее здесь: https://stackoverflow.com/questions/794 ... -zoom-of-t
