How to Create Image Hovered Detail using HTML & CSS ?

12 May, 2021
In this article, we will learn how to create a type of hover effect over an image to get its complete detail. This is can be achieved by using simple HTML & CSS.
Overview Of Our Project:
Approach:
We will first create an HTML file in which we are going to add an image for our image hanger.
We will then create a CSS style to give animation effects to the element containing the image.
We will start by defining the HTML and CSS sections of the page as given below.
HTML Section: In this section, the structure of the page is defined.
We will first create an HTML file.
We are then going to write out the boilerplate code required for an HTML page.
We will next link the CSS file or directly add the required CSS that provides all the animation effects.
In the body section, we will add an image source so that we can display our image.
index.html
<!DOCTYPE html><html lang="en">  <head>    <link rel="stylesheet" href="style.css"></head>  <body>    <h1>hover over gfg logo --)</h1>    <div class="main_box">        <div class="circle"></div>        <div class="content">            <h2>GeeksForGeeks</h2>            <br>            <p>                A Computer Science portal for geeks.                It contains well written,                well thought and well explained                computer science and programming                articles, quizzes and much more..            </p>            <br>            <a href="#">Contact Us</a>        </div>        <img src="https://media.geeksforgeeks.org/wp-content/uploads/20210223165952/gfglogo.png">    </div></body>  </html>
CSS Section: In this section, we will define the CSS of the page. Using CSS we will give different types of animations and effects to our HTML page so that it looks interactive to all users. 
We will first reset all the browser effects so that everything is consistent on all browsers.
Then we will define the styling to be given to the elements which include the size and position.
We will use clip-path function to give specific shapes to our objects.
style.css
*{    box-sizing: border-box;    margin: 0;    padding: 0;    color: #000;}  body{    background-color: rgb(71, 69, 69);    display: flex;    justify-content: center;    align-items: center;    min-height: 100vh;}  .main_box{    position: relative;    width: 42em;    height: 25em;    display: flex;    align-items: center;    border-radius: 1.5em;    transition: .5s;}  .main_box .circle{    position: absolute;    top: 6%;    left: 0;    width: 100%;    height: 100%;    border-radius: 1.5em;    overflow: hidden;}  .main_box .circle::before{    content: '';    position: absolute;    top: 0%;    left: 0;    width: 100%;    height: 100%;    clip-path: circle(7.5em at center);    transition: .4s;}  h1{    margin-right: 1em ;}  .main_box:hover .circle::before{    clip-path: circle(30em at center);    background: rgb(20, 220, 43);}  .main_box img{    top: 50%;    left: 50%;    height: 5.75em;    transform: translate(-50%,-50%);    position: absolute;    pointer-events: none;    transition: 0.4s;}.main_box:hover img{    left: 80%;    top: 12.25em;    height: 10em;}  .main_box .content{    position: relative;    width: 50%;    background: rgb(20, 220, 43);    padding: 1.25em 1.25em 1.25em 2.5em;    transition: .5s;    opacity: 0;    visibility: hidden;}  .main_box:hover .content{    left: 10%;    opacity: 1;    visibility: visible;}  .main_box .content h2{    text-transform: uppercase;    font-size: 2em;    line-height: 1em;}  .main_box .content p{    color: #fff;}  .main_box .content a{    position: relative;    text-decoration: none;    color: rgb(186, 14, 14);    padding: .6em 1.25em;    margin-top: 0.6em;    display: inline-block;      }
Output:
CSS-Properties
CSS-Questions
HTML-Questions
HTML-Tags
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property