Специальные грузовики
г. Магадан

Специальные грузовики

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

Read More

Service Two

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa

Read More

02

Service One

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa

Read More

03

Service One

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa

Read More

03

Service One

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error illum ad dolor laudantium enim ipsa libero adipisci culpa

Read More

03

ФОРМА ЗАЯВКИ

ЗАПОЛНИТЕ ФОРМУ

Выбранные услуги