JSFiddle - React, Tailwind, and code Playground
HTML
<div id="top_services">
<div class="top_blocks">
<div class="top_blocks_img">
<img src="https://i.ytimg.com/vi/9aY41D-ECsk/maxresdefault.jpg">
</div>
<div class="top_blocks_discription">
<h3>Lorem ipsu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur facere, aliquid dolore fugit ullam, harum reiciendis. Accusamus, voluptatum ipsam ad repellendus accusantium nulla blanditiis optio... <br><span><a href="">... узнать больше</a></span>
</p>
<button>Заказать</button>
</div>
</div>
<div class="top_blocks">
<div class="top_blocks_img">
<img src="http://99px.ru/sstorage/56/2017/12/mid_289604_687055.jpg">
</div>
<div class="top_blocks_discription">
<h3>Lorem ipsu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur facere, aliquid dolore fugit ullam, harum reiciendis. Accusamus, voluptatum ipsam ad repellendus accusantium nulla blanditiis optio.... <br><span><a href="">... узнать больше</a></span>
</p>
<button>Заказать</button>
</div>
</div>
<div class="top_blocks">
<div class="top_blocks_img">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5a/Canis_lupus_265b.jpg/265px-Canis_lupus_265b.jpg">
</div>
<div class="top_blocks_discription">
<h3>Lorem ipsu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur facere, aliquid dolore fugit ullam, harum reiciendis. Accusamus, voluptatum ipsam ad repellendus accusantium nulla blanditiis optio...кровообращения и разглаживание...<br><span><a href="">...<span id="face"></span> узнать...
CSS
#top_services {
width: 974px;
margin: 30px auto;
height: 550px;
background-color: #804e49;
border-radius: 5px;
border: 2px solid #db5461;
}
.top_blocks {
width: 30%;
float: left;
margin-left: 2%;
height: 500px;
background-color: #e7ac9c;
margin-top: 20px;
position: relative;
overflow: hidden;
transition: 1s;
border: 2px solid #db5461;
transition: 1s;
}
.top_blocks:nth-child(n+4) {
display: none;
transition: 1s;
}
.top_blocks:hover{
margin-top: 1.5%;
width: 31%;
margin-right: -0.5%;
margin-left: 1.5%;
opacity: 0.9;
}
.top_blocks_img {
width: 99.9%;
position: absolute;
height: 210px;
background-color: #e3a7b1;
margin: 0 auto;
display: block;
transition: 0.5s;
border-bottom: 2px solid #db5461;
}
.top_blocks_img:hover {
height: 215px;
opacity: 0.95;
}
.top_blocks_img img {
width: 100%;
height: 100%;
position: absolute;
}
.top_blocks_discription {
display: block;
position: absolute;
width: 95%;
margin-left: 2.5%;
height: 270px;
overflow: hidden;
top: 45%;
}
.top_blocks_discription h3 {
text-align: center;
font-size: 24px;
font-family: Arial;
margin-top: -3px;
margin-bottom: 10px;
color: #e74f5e;
}
.top_blocks_discription p {
text-align: center;
padding: 0 10px;
font-size: 17px;
font-family: Arial;
line-height: 1.2;
margin: auto 5px;
word-spacing: 4px;
height: 180px;
overflow: hidden;
border-bottom: 1px solid red;
margin-top: 4px;
color: #512020;
}
.top_blocks_discription p span a{
font-size: 17px;
color: white;
}
.top_blocks_discription button {
width: 50%;
height: 30px;
position: absolute;
margin: 0 25%;
bottom: 10px;
border-radius: 7px;
border: 2px solid #db5461;
background-color: #e3a7b1;
transition: 0.6s;
}
.top_blocks_discription button:hover {
width: 55%;
...
JavaScript
(function(){
var removed,
services = document.getElementById('top_services'),
lastElem = services.children.length;
setInterval(slideOut, 3000);
function slideOut(){
removed = services.removeChild(services.children[0]);
services.appendChild(removed);
}
})();