Есть такой плагин как Page Builder от SiteOrigin. Хочу сделать такие же окошка анимации. Пишу код через билдер
<a href="/kompleksnaya-strategiya/">
<img src="/wp-content/uploads/2017/07/line-1.svg" class="mainpage__service__svg" />
<div class="mainpage__service__caption">
<img src="/wp-content/uploads/2017/07/1.svg" class="img-responsive mainpage__service__img" />
<div class="mainpage__service__title">КОМПЛЕКСНАЯ<br>PERFORMANCE<br>СТРАТЕГИЯ</div>
</div>
<div class="mainpage__service__descr">
Это комплексная стратегия продвижения в digital-среде, целью которой
является достижение конкретных и измеримых результатов.
</div>
</a>
Нажимаю сохранить и после этого блдер немного сам изменил сам код
<a href="/kompleksnaya-strategiya/">
<img class="mainpage__service__svg" src="/wp-content/uploads/2017/07/line-1.svg" /></a>
<div class="mainpage__service__caption">
<img class="img-responsive mainpage__service__img" src="/wp-content/uploads/2017/07/1.svg" />
<div class="mainpage__service__title">
КОМПЛЕКСНАЯ
PERFORMANCE
СТРАТЕГИЯ</div>
</div>
<div class="mainpage__service__descr">
Это комплексная стратегия продвижения в digital-среде,
целью которой является достижение конкретных и измеримых результатов.
</div>
И анимация не работает и текст плывет....
СSS стль вот(сами изображение svg)
.mainpage__service{
display: block;
text-decoration: none;
padding: 80px 0;
height: 280px;
position: relative;
}
.mainpage__service__svg {
position: absolute;
top: 0;
left: 0;
pointer-events: none;
}
.mainpage__service__svg:hover {
fill: #f4783e;
/* цвет обводки */
stroke: white;
/* имя анимации (keyframes) */
animation-name: draw_symbol;
/* длительность анимации */
animation-duration: 2.5s;
}
@media (max-width: 767px){
.mainpage__service__svg {
display: none;
}
}
.mainpage__service__svg line {
stroke-width: 1;
stroke: #F3773D;
fill: none;
-webkit-transition: -webkit-transform .6s ease-out;
transition: transform .6s ease-out;
}
.mainpage__service .mainpage__service__svg line.top,
.mainpage__service .mainpage__service__svg line.bottom {
stroke-dasharray: 390;
}
.mainpage__service:hover .mainpage__service__svg line.left,
.mainpage__service:hover .mainpage__service__svg line.right {
stroke-dasharray: 280;
}
.mainpage__service .mainpage__service__svg line.top{
-webkit-transform: translateX(-390px);
transform: translateX(-390px);
}
.mainpage__service .mainpage__service__svg line.bottom {
-webkit-transform: translateX(390px);
transform: translateX(390px);
}
.mainpage__service .mainpage__service__svg line.left {
-webkit-transform: translateY(-280px);
transform: translateY(-280px);
}
.mainpage__service .mainpage__service__svg line.right {
-webkit-transform: translateY(280px);
transform: translateY(280px);
}
.mainpage__service:hover .mainpage__service__svg line {
transition-delay: 0ms;
}
.mainpage__service:hover .mainpage__service__svg line {
transition-delay: 150ms;
}
.mainpage__service:hover .mainpage__service__svg line.top,
.mainpage__service:hover .mainpage__service__svg line.bottom {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.mainpage__service:hover .mainpage__service__svg line.left,
.mainpage__service:hover .mainpage__service__svg line.right {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.mainpage__service__caption{
font-size: 0;
text-align: center;
margin-bottom: 30px;
}
.mainpage__service__img,
.mainpage__service__title{
display: inline-block;
vertical-align: middle;
}
.mainpage__service__img{
fill: #18242c;
display: inline-block;
width: 122px;
margin-right: 19px;
-webkit-transition: fill .9s;
-o-transition: fill .9s;
transition: fill .9s;
}
.mainpage__service:hover .mainpage__service__img{
fill: #F3773D;
}
.mainpage__service__img .st1{
fill:#1e94d2
}
.mainpage__service__title{
display: inline-block;
font-size: 20px;
font-family: "Roboto";
color: #18242c;
text-transform: uppercase;
line-height: 1.2;
text-align: left;
width: 150px;
}
.mainpage__service__descr{
font-size: 14px;
font-family: "Roboto";
color: rgba(24, 36, 44, 0.78);
line-height: 1.2;
text-align: center;
max-width: 280px;
margin: auto;
}
</a>
закрывающий тег `</div>'html
в вопросе, чтобы было видно, где и что у вас должно лежать, тогда будет понятно, что и куда вы написали неверно.