I would like to thank the ogg team sent the code that solves the problem entirely. you have to insert it in the file
www.yourwebsite.xx / templates / sj_plus / css / template-blue.css copy here so everyone can use this site view.
.blog .items-leading .item .article-text a.more,
.blog .items-row .item .article-text a.more {
text-transform: uppercase;
padding: 10px 20px 10px 20px;
float: left;
color: #ffcc00;
transition: 0.3s all ease 0s;
display: block;
position: relative;
z-index: 1;
font-weight: bold;
}
.blog .items-leading .item .article-text a.more:after,
.blog .items-row .item .article-text a.more:after {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 0px;
transition: 0.3s all ease 0s;
background: #2c3c80;
content: "";
z-index: -1;
}
.blog .items-leading .item:hover .article-text a.more:after,
.blog .items-row .item:hover .article-text a.more:after {
width: 100%;
}