Как лучше реализовать такую рамку при наведении на элемент?
2 ответа
Для этого можно использовать псевдоэлементы :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>
Пример анимации с помощью одновременного смешения четырёх линий вдоль границ изображения. Ниже поясняющая схема достижения эффекта:
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>
Более подробно о реализации данного эффекта здесь