Now, we are going to see how to image border animation. Normally we are used to image are simply show our website. we would like to share this concept for image border animated easily.
This method using code for html and css. Method used your website show the images different way.
This way easy to understand you. use this code on your website. see the demo video and download the code.
Code for animated image border in html:
<div class="container-block">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65984/photo-1413752567787-baa02dde3c65.jpg">
<div class="inner-block">
<div class="slider-top-right"></div>
</div>
<div class="block-content">
<h1>Nature</h1>
</div>
</div>
Code for animated image border in css:
body {
text-align: center;
}
.container-block {
color: #fff;
display: inline-block;
margin: 2rem;
max-width: 500px;
position: relative;
&::before {
background-color: rgba(0, 0, 0, .3);
bottom: 0;
content: '';
display: block;
position: absolute;
top: 0;
width: 100%;
}
&:hover {
.inner-block:before,
.slider-top-right:after {
height: 100%;
}
.inner-block:after,
.slider-top-right:before {
width: 100%;
}
}
img {
display: block;
max-width: 100%;
}
}
.block-content {
position: absolute;
bottom: 10%;
left: 10%;
padding: 0 1rem;
}
.slider-top-right:before,
.inner-block:after {
height: 4px;
transition: width .75s ease;
width: 0%;
}
.slider-top-right:after,
.inner-block:before {
height: 0%;
transition: height .75s ease;
width: 4px;
}
.inner-block:before,
.inner-block:after,
.slider-top-right:before,
.slider-top-right:after {
background-color: #fff;
content: '';
display: block;
position: absolute;
}
.inner-block {
font-size: 2em;
width: 90%;
height: 90%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
&:before {
bottom: 0;
left: 0;
}
&:after {
bottom: 0;
right: 0;
}
}
.slider-top-right {
position: relative;
width: 100%;
height: 100%;
&:before {
top: 0;
left: 0;
}
&:after {
top: 0;
right: 0;
}
}
0 Comments