默认情况下，我从媒体库中选择特色图像。当我将鼠标悬停在每个图标上时，它会显示一个带加号的黑色覆盖。我有一个很酷的css动画，想把它添加到每个帖子的特色图片中。下面是我从codepen获得的css动画代码。有人知道怎么做吗？我只是想知道怎么做。无论是通过添加自定义css，还是使用挂钩或过滤器，还是从样式。css。最简单的更好。
非常感谢您的帮助。提前谢谢。
<!--------------------------------------------------------------------------->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
html {
height: 100%;
}
@media (max-width: 32rem) {
html {
font-size: 12px;
}
}
body {
background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#111));
background: linear-gradient(#333, #111);
min-height: 100%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
}
.badge {
display: block;
position: relative;
width: 25rem;
height: 20rem;
cursor: pointer;
background: url(https://source.unsplash.com/random/1000x1000) no-repeat 100% 50%;
background-size: 120%;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.75);
}
.badge:hover {
box-shadow: 0px 0.5rem 2rem rgba(0, 0, 0, 0.75);
background-position: 0% 50%;
}
.badge:hover .text {
-webkit-transform: rotate(-45deg) translate(0px) rotate(-315deg);
transform: rotate(-45deg) translate(0px) rotate(-315deg);
background: rgba(102, 51, 153, 0.5);
width: 25rem;
letter-spacing: 1rem;
line-height: 20rem;
height: 20rem;
border-radius: 0%;
margin-top: -10rem;
margin-left: -12.5rem;
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1), letter-spacing 1.5s ease-out;
}
.badge .text {
display: block;
position: absolute;
width: 10rem;
height: 10rem;
line-height: 10rem;
left: 50%;
top: 50%;
margin-top: -5rem;
margin-left: -5rem;
font-size: 2rem;
font-family: Raleway, sans-serif;
text-align: center;
color: #fff;
border-radius: 50%;
background: rebeccapurple;
-webkit-transform: rotate(-180deg) translate(-10rem) rotate(180deg);
transform: rotate(-180deg) translate(-10rem) rotate(180deg);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>
<meta charset="UTF-8">
<title>animation</title>
</head>
<body>
<div class=\'badge\'>
<div class=\'text\'>’Hallo!</div>
</div>
</body>
</html>
<!--------------------------------------------------------------------------->
