How to Show Font On Hovering the Mouse Over Image?


The task we are going to perform in this article is about how to show font on hovering the mouse over image. Let’s dive into the article and have a quick view on the hovering and mouse over in HTML.

The onmouseover event in HTML is triggered when the mouse pointer touches an element. When the mouse pointer departs an element, an event called onmouseout takes place.

When a user interacts with an element using a pointing device, the:hover CSS pseudo-class matches, however it is not always activated. Typically, it is activated when a user hovers their cursor over an element (mouse pointer).

Syntax

Following is the syntax for hover -

:hover

For getting better understanding on showing font on hovering the mouse over the image, let’s look into the following examples.

Example

In the example below, we make the font visible when the mouse is hovered over the image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      .img {
         position: relative;
         width: 200px;
         height: 200px;
         float: left;
         margin-right: 10px;
      }
      .img div{
         position: absolute;
         bottom: 0;
         right: 0;
         background: black;
         color: white;
         margin-bottom: 5px;
         visibility: hidden;
      }
      .img:hover{
         cursor: pointer;
      }
      .img:hover div{
         width: 150px;
         padding: 8px 15px;
         visibility: visible;
         opacity: 0.7;
      }
      </style>
      <div class="img">
         <img src='https://www.tutorialspoint.com/html/images/html-mini-logo.jpg' width='100%' height='100%'>
         <div>TP HTML LOGO</div>
      </div>
      <div class="img">
         <img src='https://www.tutorialspoint.com/java/images/java-mini-logo.jpg' width='100%' height='100%'>
         <div>TP JAVA LOGO</div>
      </div>
   </body>
</html>

When the script gets executed, it will generate an output displaying an image on the webpage. If the user hovers the mouse over the image, it will display a text description of that particular image on the page.

Example

In the following example, we make the font appear when the mouse hovers over the image, and it covers the entire image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      .tutorial {
         position: relative;
         max-width: 500px;
      }
      .tutorial img { width: 100%; }
      .fulltext {
         box-sizing: border-box;
         width: 100%;
         height: 100%;
         position: absolute;
         top: 0; left: 0;
         text-align: center;
         padding-top: 30%;
         background-color: #EAFAF1 ;
         color: black;
      }
      .fulltext {
         visibility: none; opacity: 0;
         transition: opacity 0.3s;
      }
      .tutorial:hover .fulltext {
      visibility: visible; opacity: 1;
      }
      </style>
      <div class="tutorial">
         <img src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg>
         <div class="fulltext">
            LEARN JAVA...!<br>
         </div>
      </div>
   </body>
</html>

On running the above script, the output window will pop up, displaying an image on the webpage. If the user moves the mouse over the image, it will display text that covers the entire image.

Example

Execute the below code to observe how the font gets displayed when you hover the mouse over the image.

<!DOCTYPE html>
<html>
   <body>
      <style>
      div {
         position: relative;
         top: 0px;
         left: 0px;
         width: 400px;
         height: 400px;
         border-radius: 50%;
         overflow: hidden;
         text-align: center
      }
      img {
         width: 400px;
         height: 400px;
         position: absolute;
         border-radius: 50%
      }
      img:hover {
         opacity: 0;
         transition:opacity 2s;
      }
      heading {
         line-height: 40px;
         font-weight: bold;
         text-align: center;
         position: absolute;
         display: block
      }
      div p {
         width: 420px;
         line-height: 20px;
         display: inline-block;
         padding: 200px 0px;
         vertical-align: middle;
         height: 450px
      }
      </style>
      <div>
         <img src="https://www.tutorialspoint.com/static/images/logo-color.png">
         <p>Welcome to Tutorialspoint</p>
      </div>
   </body>
</html>

When the script gets executed, the output window will pop up, making the image displayed in a round shape on the webpage. When the user hovers the mouse over the image, it will display text.

Updated on: 20-Apr-2023

671 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements