.card { position: relative; width: 300px; height: 375px; margin: 0 auto; cursor: pointer; margin-bottom: 100px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card .card__image img { width: 300px; height: 375px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before, .card::after { position: absolute; content: ''; left: -10px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before { width: 1px; height: 100%; top: 10px; } .card::after { width: 100%; height: 1px; bottom: -10px; } .card.pink::before, .card.pink::after { background: #DC3264; }
.card { position: relative; width: 300px; height: 375px; margin: 0 auto; cursor: pointer; margin-bottom: 100px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card .card__image img { width: 300px; height: 375px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before, .card::after { position: absolute; content: ''; left: -10px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before { width: 1px; height: 100%; top: 10px; } .card::after { width: 100%; height: 1px; bottom: -10px; } .card.double .card__image::before, .card.double .card__image::after { position: absolute; content: ''; left: -20px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; background: #70759A; } .card.double .card__image::before { width: 1px; height: 100%; top: 20px; } .card.double .card__image::after { width: 100%; height: 1px; bottom: -20px; } .card.double.pink::before, .card.double.pink::after { background: #DC3264; } .card.double .card__image:hover::before { width: 10px; } .card.double .card__image:hover::after { height: 10px; } .card.purple::before, .card.purple::after { background: #D6A3AC; }
.card { position: relative; width: 300px; height: 375px; margin: 0 auto; cursor: pointer; margin-bottom: 100px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card .card__image img { width: 300px; height: 375px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before, .card::after { position: absolute; content: ''; left: -10px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before { width: 1px; height: 100%; top: 10px; } .card::after { width: 100%; height: 1px; bottom: -10px; } .card.top-bottom::before { top: inherit; width: calc(100% - 60px); height: 1px; left: 30px; bottom: -30px; } .card.top-bottom.blue::after { top: inherit; width: calc(100% - 30px); height: 1px; left: 15px; bottom: -15px; background: #E7DEDE; } .card.top-bottom:hover::before { height: 15px; width: calc(100% - 60px); } .card.top-bottom:hover::after { height: 15px; } .card.top-bottom .card__image::before, .card.top-bottom .card__image::after { position: absolute; content: ''; left: -20px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; background: #70759A; } .card.top-bottom .card__image::before { width: calc(100% - 60px); height: 1px; left: 30px; top: -20px; } .card.top-bottom .card__image::after { width: calc(100% - 30px); height: 1px; left: 15px; top: -10px; background: #E7DEDE; } .card.top-bottom .card__image:hover::before { width: calc(100% - 60px); height: 10px; background: #92AFD0; } .card.top-bottom .card__image:hover::after { height: 10px; background: #E7DEDE; } .card.blue::before, .card.blue::after { background: #92AFD0; }
.card { position: relative; width: 300px; height: 375px; margin: 0 auto; cursor: pointer; margin-bottom: 100px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card .card__image img { width: 300px; height: 375px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before, .card::after { position: absolute; content: ''; left: -10px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card::before { width: 1px; height: 100%; top: 10px; } .card::after { width: 100%; height: 1px; bottom: -10px; } .card.both .card__image::before, .card.both .card__image::after { position: absolute; content: ''; left: -20px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; background: #E0CDCD; } .card.both .card__image::before { width: 1px; height: 100%; right: -10px; left: inherit; top: -10px; } .card.both .card__image::after { width: 100%; height: 1px; top: -10px; left: 10px; } .card.both.pink::before, .card.both.pink::after { background: #DC3264; } .card.both .card__image:hover::before { width: 10px; } .card.both .card__image:hover::after { height: 10px; } .card.white::before, .card.white::after { background: #fff; }