how to move elements in hover with transform?
تبليغسؤال
يرجى شرح بإيجاز لمإذا تشعر أنك ينبغي الإبلاغ عن هذا السؤال.
i was messing around with transform and when i added it to a hover and it didn’t work.
i wanna make a share botton that when you hover it 3 bottons show them selves
transform works correct but when i use it in pesudo selector:hover its not working.
div{
width: 400px;
height: 400px;
margin: 10px auto auto 100px;
position: relative;
}
img{
position: absolute;
top: 0;
width: 60px;
height: 60px;
}
img[src=”instagram.svg”]{
z-index: 1;
}
img[src=”linked in.svg”]{
z-index: 2;
}
img[src=”telegram i.svg”]{
z-index: 3;
}
img[src=”share btn.svg”]{
z-index: 4;
transition: 600ms;
}
img[src=”share btn.svg”]:hover{
opacity: 0;
transition: 600ms;
}
img[src=”telegram i.svg”]:hover{
transform: translate(30px,30px);
}
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div>
<img src=”instagram.svg” alt=”your browser is suck”>
<img src=”linked in.svg” alt=”your browser is suck”>
<img src=”telegram i.svg” alt=”your browser is suck”>
<img src=”share btn.svg” alt=”your browser is suck”>
</div>
</body>
</html>
أضف إجابة