Image Box Hover Animation With social media Using HTML and CSS

Many blogs and websites, including my own, feature “hover over” effects on images where the image changes somehow when the mouse hovers over it. “Hover over” can also be referred to as rollover or mouseover.

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);
}
RH Suman
RH Suman
Articles: 64

Newsletter Updates

Enter your email address below to subscribe to our newsletter

Leave a Reply