Pop Out Effect in CSS
Pop Out Effect in CSS

Hy Everyone, In this tutorial we will create a Pop Out Effect Using CSS. We have used a basic hover effect to create Pop Out Effect.

We have created a basic Pop Out Effect Using CSS. When you hover the image it will be resized to scale up. It will give a pop-out image look.

Pop Out Effect in CSS

for creating this effect we will need to create two files only called index.html & style.css. let’s start with our first file index.html.

index.html

<!DOCTYPE html>
<head>
<title>Circle Animation</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>  
    <div class="person">
      <div class="container">
        <div class="container-inner">
          <img
            class="circle"
            src="https://www.designyourway.net/blog/wp-content/uploads/2018/06/Seamless-Polygon-Background.jpg"
          />
          <img
            class="img img1"
            src="https://pngimg.com/uploads/man/man_PNG6531.png"
          />
        </div>
      </div>
      <div class="divider"></div>
      <div class="name">Michel Jems</div>
      <div class="title">Senior Developer</div>
    </div>   
</body>
</html>

Here we are using an image with the class name “circle” for our circle background and the other one is our main image.

style.css

@import url("https://fonts.googleapis.com/css2?family=Merriweather:[email protected]&family=Sumana:[email protected]&display=swap");
body {
  align-items: center;
  background-color: #ffffff;
  display: flex;
  font-family: "Merriweather", serif;
  flex-wrap: wrap;
  justify-content: center;
  height: 100vh;
  margin: 0;
}
.person {
  align-items: center;
  display: flex;
  flex-direction: column;
  width: 280px;
}
.container {
  border-radius: 50%;
  height: 312px;
  -webkit-tap-highlight-color: transparent;
  transform: scale(0.48);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
  width: 400px;
}
.container:after {
  background-color: #ffffff;
  content: "";
  height: 10px;
  position: absolute;
  top: 390px;
  width: 100%;
}
.container-inner {
  clip-path: path(
    "M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z"
  );
  position: relative;
  transform-origin: 50%;
  top: -200px;
}
.circle {
  background-color: #fee7d3;
  border-radius: 50%;
  cursor: pointer;
  height: 380px;
  left: 10px;
  pointer-events: none;
  position: absolute;
  top: 210px;
  width: 380px;
  transition-duration: 0.3s;
}
.img {
  pointer-events: none;
  position: relative;
  transform: translateY(20px) scale(1.1);
  transform-origin: 50% bottom;
  transition-duration: 0.3s;
}

.container:hover .circle {
  transform: translateY(0) rotateZ(10deg);
  transition-duration: 0.3s;
}

.container:hover .img {
  transform: translateY(0) scale(1.2);
  transition-duration: 0.3s;
}
.img1 {
  left: 65px;
  top: 164px;
  width: 270px;
}
.divider {
  background-color: #ca6060;
  height: 1px;
  width: 160px;
}
.name {
  color: #1DA0B3;
  font-size: 36px;
  font-weight: 600;
  margin-top: 16px;
  text-align: center;
}
.title {
  color: #595959;
  font-family: arial;
  font-size: 14px;
  font-style: italic;
  margin-top: 4px;
}


Our code is simple and easy to understand. The main code of this style is:

.img {
  pointer-events: none;
  position: relative;
  transform: translateY(20px) scale(1.1);
  transform-origin: 50% bottom;
  transition-duration: 0.3s;
}

.container:hover .circle {
  transform: translateY(0) rotateZ(10deg);
  transition-duration: 0.3s;
}

.container:hover .img {
  transform: translateY(0) scale(1.2);
  transition-duration: 0.3s;
}
.img1 {
  left: 65px;
  top: 164px;
  width: 270px;
}


In .img class we have set transform: translateY(20px) scale(1.1); and in the .container:hover .img we have set it to the transform: translateY(0) scale(1.2);

First, it will move the image to 20px bottom and the scale will be 1.1 after the hover effect it will move the back image to its default position of 0px and the size will be increased using the scale(1.2). basically, it is used to zoom.

Hope you guys enjoyed this tutorial!

If you are having any issues with the code, then you can visit our GitHub Account. Click Here!

You Might Like This:

Our Courses:

HTML – Beginner to Advance

CSS – Beginner to Advance

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply