Image Box Hover Animation With social media Using HTML and CSS

RH Suman
June 20, 2022

60

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);
}

Preview

Tags

HTML CSS Animation Hover

Subscribe

Get Updates

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

Please insert email address.

Recommended Posts