Image hover border animation effect with HTML & CSS

RH Suman
July 6, 2022

121

Image hover animation effect with HTML & CSS,

HTML Code:

<div class="box">
    <div class="layer">
      <img src="https://picsum.photos/600/400/?random" alt="">
      <div class="caption">
        <div class="about">
          <h2>Image Hover Title</h2>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
        </div>
      </div>
    </div>
  </div>

CSS Code:

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-color: #555d5d;
}
.box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 400px;
  overflow: hidden;
}
.layer{
  width: 100%;
  height: 100%;
}
.layer img{
  width: 100%;
  height: 100;
  transition: .5s;
}
.box:hover .layer img{
  transform: scale(1.3) rotate(-10deg) ;
  opacity: 0.5;
}
.about{
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  padding: 20px;
  display: table;
  opacity: .5;
  transition: .5s;
}
.box:hover .about{
  opacity: 1;
}
.about h2,
.about p{
  padding-top: 50px;
  text-shadow: 0 0 4px #000;
}
.box .caption{
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 50px;
  right: 50px;
}
.box .caption:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-top: 2px solid #bbb;
  border-bottom: 2px solid #bbb;
  transition: .5s;
  transform: scale(0,1);
}
.box:Hover .caption:before{
  transform: scale(1,1);
}
.box .caption:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-left: 2px solid #bbb;
  border-right: 2px solid #bbb;
  transition: .5s;
  transform: scale(1,0);
}
.box:Hover .caption:after{
  transform: scale(1,1);
}

Preview:

Tags

Image Image Box Hover Hover Effect Animation Hover Animation HTML CSS

Subscribe

Get Updates

Subscribe our newsletter to get the last update into your inbox!

Please insert email address.

Recommended Posts