Специальные грузовики
CSS Card Hover Effects Html CSS
@import url('http://fonts.googleapis.com/css?family=Poppins');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1d;
}
.container{
position: relative;
width: 1000px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin: 20px;
}
.container .card{
position: relative;
height:250px;
margin: 30px 0;
background:#fff;
width: 45%;
display: flex;
}
.container .card .imgBx{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #333;
z-index: 1;
display: flex;
justify-content: center;
overflow: hidden;
transition: 0.5s ease-in-out;
}
.container .card:hover .imgBx{
width: 150px;
height: 150px;
left: -75px;
top: calc(50% - 75px);
transition: #ff0057;
}
.container .card .imgBx:before{
content: attr(data-text);
bottom: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 6em;
color: rgba(255,255,255,.05);
font-weight: 700;
}
.container .card:hover{
box-shadow: 0 30px 50px rgba(0,0,0,.2);
}
.container .card .face{
position: absolute;
top: 0;
left: 0;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
.container .card .face.face1{
box-sizing: border-box;
padding:20px;
text-align: center;
background:#fff;
color:#c3073f
}
.container .card .face.face1 h2{
margin-top:60px;
}
.container .card .face.face1 a{
display: inline-block;
padding:5px 10px;
margin-top:20px;
text-decoration: none;
color:#c3073f;
border:2px solid #c3073f;
transition:0.5s
}
.container .card .face.face1 a:hover{
color:#fff;
background:#c3073f;
}
.container .card .face.face2{
background-color: #c3073f;
transition:0.5s;
}
.container .card:hover .face.face2{
height:80px;
width:80px;
border-radius: 50%;
top:40px;
left:50%;
transform: translateX(-50%);
background:transparent;
}
.container .card .face.face2 h2{
margin:0;
padding:0;
font-size: 10em;
color:#fff;
transition:0.5s;
}
.container .card:hover .face.face2 h2{
color:#c3073f;
font-size: 2em;
}
Service One
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa
Service Two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa
02
Service One
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa
03
Service One
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa
03
Service One
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa