如何使圆圈内的徽标居中?
How to center logo inside of circle?
我有一个学校项目,我想为我的网站制作一个联系我们页面。我想要做的是将社交媒体图标居中放置在一个圆圈内。我在下面包含了一个代码示例。
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</body>
</html>
在我的屏幕上,代码运行如下:
我还为 ul 创建了一个 class,因为我已经有了一个列表。如何使徽标在圆圈内居中?
所有列表 (.ul2 li) 的简单“text-align: 居中”将使图标居中。
与您发送的图片不同,您提供的代码似乎是垂直居中的。如果你想将一个项目垂直和水平居中,你可以做的一件事是使用 flexbox 样式。对于一行中的项目(声明 display: flex 默认为行方向),“justify-content”水平对齐,而“align-items”垂直对齐项目。
display: flex;
justify-content: center;
align-items: center;
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
text-align: center;
transition: .5s;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
请将此样式添加到ul2 li
.ul2 li{
display: flex;
align-items:center;
justify-content:center;
}
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: flex;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
align-items:center;
justify-content:center;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
我有一个学校项目,我想为我的网站制作一个联系我们页面。我想要做的是将社交媒体图标居中放置在一个圆圈内。我在下面包含了一个代码示例。
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
</body>
</html>
在我的屏幕上,代码运行如下:
我还为 ul 创建了一个 class,因为我已经有了一个列表。如何使徽标在圆圈内居中?
所有列表 (.ul2 li) 的简单“text-align: 居中”将使图标居中。
与您发送的图片不同,您提供的代码似乎是垂直居中的。如果你想将一个项目垂直和水平居中,你可以做的一件事是使用 flexbox 样式。对于一行中的项目(声明 display: flex 默认为行方向),“justify-content”水平对齐,而“align-items”垂直对齐项目。
display: flex;
justify-content: center;
align-items: center;
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: block;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
text-align: center;
transition: .5s;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>
请将此样式添加到ul2 li
.ul2 li{
display: flex;
align-items:center;
justify-content:center;
}
.ul2{
display: flex;
}
.ul2 li{
position: relative;
display: flex;
color: #666;
font-size: 30px;
height: 60px;
width: 60px;
background: #171515;
line-height: 60px;
border-radius: 50%;
margin: 0 15px;
cursor: pointer;
transition: .5s;
align-items:center;
justify-content:center;
}
.ul2 li:before{
position: absolute;
content: '';
top: 0;
left: 0;
height: inherit;
width: inherit;
/* background: #d35400; */
border-radius: 50%;
transform: scale(.9);
z-index: -1;
transition: .5s;
}
.ul2 li:nth-child(1):before{
background: #4267B2;
}
.ul2 li:nth-child(2):before{
background: #1DA1F2;
}
.ul2 li:nth-child(3):before{
background: #E1306C;
}
.ul2 li:nth-child(4):before{
background: #2867B2;
}
.ul2 li:nth-child(5):before{
background: #ff0000;
}
.ul2 li:hover:before{
filter: blur(3px);
transform: scale(1.2);
/* box-shadow: 0 0 15px #d35400; */
}
.ul2 li:nth-child(1):hover:before{
box-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover:before{
box-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover:before{
box-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover:before{
box-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover:before{
box-shadow: 0 0 15px #ff0000;
}
.ul2 li:nth-child(1):hover{
color: #456cba;
box-shadow: 0 0 15px #4267B2;
text-shadow: 0 0 15px #4267B2;
}
.ul2 li:nth-child(2):hover{
color: #26a4f2;
box-shadow: 0 0 15px #1DA1F2;
text-shadow: 0 0 15px #1DA1F2;
}
.ul2 li:nth-child(3):hover{
color: #e23670;
box-shadow: 0 0 15px #E1306C;
text-shadow: 0 0 15px #E1306C;
}
.ul2 li:nth-child(4):hover{
color: #2a6cbb;
box-shadow: 0 0 15px #2867B2;
text-shadow: 0 0 15px #2867B2;
}
.ul2 li:nth-child(5):hover{
color: #ff1a1a;
box-shadow: 0 0 15px #ff0000;
text-shadow: 0 0 15px #ff0000;
}
.ul2 li:hover{
color: #ffa502;
box-shadow: 0 0 15px #d35400;
text-shadow: 0 0 15px #d35400;
}
.con{
position: relative;
height: 500px;
width: 400px;
overflow: hidden;
background: #fff;
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.3);
transition: 0.3s ease-out;
}
.con:hover{
box-shadow: 0px 1px 35px 0px rgba(0,0,0,0.3);
}
.con .image{
background: #000;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
transition: transform 0.3s ease-out;
}
.con:hover .image{
transform: translateY(-100px);
}
.image img{
height: 100%;
width: 100%;
object-fit: cover;
transition: opacity 0.3s ease-out;
}
.con:hover .image img{
opacity: 0.7;
}
.con:hover .image{
transform: translateY(-100px);
}
.con:hover > ul > li > a{
opacity: 1;
transform: translateY(0);
}
.con:hover > ul > li:nth-child(2) a{
transition-delay: 0.1s;
}
.con:hover > ul > li:nth-child(3) a{
transition-delay: 0.2s;
}
.con:hover > ul > li:nth-child(4) a{
transition-delay: 0.3s;
}
.con:hover > ul > li:nth-child(5) a{
transition-delay: 0.4s;
}
.con .content{
position: relative;
width: 100%;
height: 100%;
background: #fff;
}
.info{
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
color: #000;
line-height: 26px;
}
.info h2{
font-size: 27px;
margin: 3px 0;
}
.info span{
color: #1a1a1a;
}
<head>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<ul class="ul2">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-linkedin-in"></i></li>
<li><i class="fab fa-youtube"></i></li>
</ul>