27

Как лучше реализовать такую рамку при наведении на элемент?

введите сюда описание изображения

2 ответа 2

43

Для этого можно использовать псевдоэлементы :before и :after. Например, так:

html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
}
<div class="block">
  <img src="http://i.imgur.com/jpBZGDX.png" alt="" />
</div>


Можно немного поиграться со стилями и получить разные эффекты.

Вариант #1 с transform: translate():

html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  transform: translate(10px, -10px);
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  transform: translate(-10px, 10px);
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
<div class="block">
  <img src="http://i.imgur.com/15ofDrj.png" alt="" />
</div>


Вариант #2 с transform: translate():

html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 75px;
  height: 195px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
  transform: translate(-10px, 10px);
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
  transform: translate(10px, -10px);
}

.block:hover:before,
.block:hover:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
<div class="block">
  <img src="http://i.imgur.com/15ofDrj.png" alt="" />
</div>


Вариант #3 с width и height:

html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  background: #000;
  position: relative;
  z-index: 1;
  cursor: pointer;
  margin: 20px auto;
}

.block:before,
.block:after {
  content: '';
  position: absolute;
  display: block;
  width: 0px;
  height: 0px;
  border: green solid 2px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.block:before {
  right: -5px;
  top: -5px;
  border-left: none;
  border-bottom: none;
}

.block:after {
  left: -5px;
  bottom: -5px;
  border-right: none;
  border-top: none;
}

.block:hover:before,
.block:hover:after {
  width: 75px;
  height: 195px;
  opacity: 1;
  visibility: visible;
}
<div class="block">
  <img src="http://i.imgur.com/15ofDrj.png" alt="" />
</div>


Вариант #4 на SVG:

html,
body {
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.border {
  width: 186px;
  height: 256px;
  display: block;
  position: absolute;
  left: -5px;
  bottom: -5px;
}

.border polyline {
  stroke: green;
  stroke-width: 2px;
  stroke-dasharray: 271;
  stroke-dashoffset: 271;
  transition: all 0.6s ease-in-out;
}

.block:hover .border polyline {
  stroke-dashoffset: 0;
  opacity: 1;
  visibility: visible;
}
<div class="block">
  <img src="http://i.imgur.com/15ofDrj.png" alt="" />
  <svg class="border" version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="186px" height="256px" viewBox="0 0 186 256" enable-background="new 0 0 186 256" xml:space="preserve">
    <polyline fill="none" stroke-miterlimit="10" points="76,254.5 1.531,254.5 1.5,59"/>
    <polyline fill="none" stroke-miterlimit="10" points="110,1.5 184.969,1.5 184.75,197"/>
  </svg>
</div>


UPDATE

Вариант #5 с вынесением рамки в отдельные блоки и использованием transform: translate():

html,
body {
  overflow: hidden;
  padding: 10px;
  margin: 0px;
  background: #1a244e;
}

.block {
  width: 176px;
  height: 246px;
  position: relative;
  z-index: 1;
  margin: 20px auto;
}

.border {
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
}

.border:before,
.border:after {
  content: '';
  position: absolute;
  display: block;
  background: green;
  transition: all 0.2s ease-in-out;
  opacity: 0;
  visibility: hidden;
}

.border:before {
  width: 75px;
  height: 2px;
}

.border:after {
  width: 2px;
  height: 195px;
}

.border.border-rt:before,
.border.border-rt:after {
  right: 0px;
  top: 0px;
}

.border.border-lb:before,
.border.border-lb:after {
  left: 0px;
  bottom: 0px;
}

.border.border-rt:before {
  transform: translate(100%, 0);
}

.border.border-rt:after {
  transform: translate(0, -100%);
}

.border.border-lb:before {
  transform: translate(-100%, 0);
}

.border.border-lb:after {
  transform: translate(0, 100%);
}

.block:hover .border:before,
.block:hover .border:after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
<div class="block">
  <img src="http://i.imgur.com/15ofDrj.png" alt="" />
  <div class="border border-rt"></div>
  <div class="border border-lb"></div>
</div>

0
9

Пример анимации с помощью одновременного смешения четырёх линий вдоль границ изображения. Ниже поясняющая схема достижения эффекта:

введите сюда описание изображения

body {
  background: #2c3e50;
}

.box {
  width: 176px;
  height: 246px;
  position: relative;
  background-image: url("http://i.imgur.com/15ofDrj.png");
  display: inline-block;
  cursor: pointer;
  opacity: 0.8;
}

.box:hover {
  opacity: 1;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

.box svg {
  position: absolute;
  top: 0;
  left: 0;
}

.box svg line {
  stroke-width: 4;
  stroke: skyblue;
  fill: none;
  -webkit-transition: all .8s ease-in-out;
  transition: all .8s ease-in-out;
}

.box:hover svg line {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.box svg line.top,
.box svg line.bottom {
  stroke-dasharray: 176 176;
}

.box svg line.left,
.box svg line.right {
  stroke-dasharray: 246 246;
}

.box:hover svg line.top {
  -webkit-transform: translateX(-352px);
  transform: translateX(-352px);
}

.box:hover svg line.bottom {
  -webkit-transform: translateX(352px);
  transform: translateX(352px);
}

.box:hover svg line.left {
  -webkit-transform: translateY(492px);
  transform: translateY(492px);
}

.box:hover svg line.right {
  -webkit-transform: translateY(-492px);
  transform: translateY(-492px);
}
<div class="box">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <line class="top" x1="0" y1="0" x2="528" y2="0"/> 
    <line class="bottom" x1="-352" y1="246" x2="176" y2="246"/> 
    <line class="left" x1="0" y1="-492" x2="0" y2="246"/> 
    <line class="right" x1="176" y1="0" x2="176" y2="738"/> 
  </svg>
</div>

Более подробно о реализации данного эффекта здесь

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.