How to display font on mouseover of image?
The task we are going to perform in this article is how to display fonts when hovering the mouse over an image. Let’s dive into this article and take a quick look at hover and mouseover in HTML.
The onmouseover event in HTML is triggered when the mouse pointer touches an element. When the mouse pointer leaves an element, an event called onmouseout occurs.
The :hover CSS pseudo-class matches when the user interacts with an element using a pointing device, but it is not always activated. Normally it is activated when the user hovers the cursor over the element (mouse pointer).
grammar
The following is the syntax of hover -
:hover
To better understand displaying fonts when hovering over an image, let's look at the following example.
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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to display font on mouseover of image?" >
<div>TP HTML LOGO</div>
</div>
<div class="img">
<img src="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" style="max-width:90%" style="max-width:90%" alt="How to display font on mouseover of image?" >
<div>TP JAVA LOGO</div>
</div>
</body>
</html>When the script executes, it will generate an output that displays the image on the web page. If the user hovers over the image, it will display a text description of that specific image on the page.
Example
In the example below, we make the font appear when the mouse is hovered over the image, and cover 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" src=https://www.tutorialspoint.com/java/images/java-mini-logo.jpg alt="How to display font on mouseover of image?" >
<div class="fulltext">
LEARN JAVA...!<br>
</div>
</div>
</body>
</html>When you run the above script, an output window will pop up to display the image on the web page. If the user moves the mouse over the image, it will display text covering the entire image.
Example
Execute the following code and observe how the font appears 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="/static/imghw/default1.png" data-src="https://www.tutorialspoint.com/static/images/logo-color.png" class="lazy" alt="How to display font on mouseover of image?" >
<p>Welcome to Tutorialspoint</p>
</div>
</body>
</html>When the script is executed, the output window will pop up, making the image appear as a circle on the web page. When the user hovers over the image, it will display the text.
The above is the detailed content of How to display font on mouseover of image?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
win10 font folder path details
Jan 03, 2024 pm 08:37 PM
When inputting text, many friends like to add their favorite personalized fonts, but they do not know where the font folder path of the win10 system is and cannot add fonts. The following will introduce the specific folder path to you. Win10 font folder path: 1. Click "This PC" on the desktop. 2. Enter the system disk C drive. 3. Click the “windows” folder. 4. Pull down to find the "Fonts" folder. 5. You can enter the font library. Friends who have other questions can take a look to learn more about common problems with win10 fonts~
How to change the font in Outlook on Apple mobile phone
Mar 08, 2024 pm 04:46 PM
How to change the font in Outlook on Apple mobile phone? First open the Outlook software and click on the file in the upper left corner of the interface. You can set the font according to your own preferences. After the settings are completed, click the OK button. Let’s take a look! How to change the font in Outlook on Apple mobile phone 1. Open the Outlook software and click the "File" option in the upper left corner of the interface. 2. In the list that appears, find "Options" and click to enter. 3. On the left side of the option list, click "Mail". 4. Next, select “Letter and Fonts”. 5. If you want to set the font for new emails, reply emails, or composing, click the corresponding option to enter the settings. 6. Set the font according to personal preference. After the setting is completed, click OK
How to solve win11 font blur problem
Jan 13, 2024 pm 09:00 PM
After updating the win11 system, some friends found that their win11 fonts were blurred and very uncomfortable to use. This may be due to a bug in the system version, or it may be that we have turned on special effects. Let’s follow the editor. Let’s see how to solve it. Win11 fonts are blurred: Method 1: 1. First, right-click this computer and open "Properties" 2. Then enter "Advanced System Settings" in the related link 3. Then click "Settings" in Performance to open it. 4. Under "Visual Effects" check "Adjust for Best Performance" and click "OK" to save. Method 2: 1. Right-click a blank space on the desktop and open "Display Settings" 2. Click "Zoom" under Zoom and Layout 3. Then click "Text Size" under relevant settings
How to change the font of Xiaomi 11_How to change the font of Xiaomi 11
Mar 25, 2024 pm 07:26 PM
1. Open the phone settings and click [Display]. 2. Click [Font]. 3. Select the font you like or click [More Fonts] to download the application.
Detailed explanation of Win11 font installation method
Dec 27, 2023 pm 05:16 PM
Some friends cannot find where their fonts are installed after installing win11 fonts, so they raise the issue of the installation location of win11 fonts. In fact, we can enter the font management in personalization to find the location where the fonts are installed. Let’s take a look below. Win11 font installation location: 1. First, right-click a blank space on the desktop and open "Personalization" settings. 2. Then enter the "Font" installation management settings. 3. Find the font you want and enter it. 4. If you can’t find it, you can also search directly above. 5. After entering the font, you can see the installation location of the win11 font in "Font File" under metadata. 6. If we want to uninstall the font, click Uninstall here.
How to make vivo mobile phone font larger and where to set it
Feb 24, 2024 pm 06:16 PM
How to make the font size of vivo mobile phone larger? Where can I set it? In vivo mobile phone, you can make the font size larger, but most users don’t know how to set the font size of vivo mobile phone. Next, the editor brings you the settings of how to make the font size of vivo mobile phone larger. Method graphic tutorials, interested users come and take a look! Vivo mobile phone usage tutorial How to make the font size of vivo mobile phone larger Where to set it 1. First open the [Settings] function in the vivo mobile phone and click on it; 2. Then jump to the settings interface and find the [Display and Brightness] function; 3. Then Reach the page in the picture below and click the [Font Size and Thickness] service; 4. Finally, slide the horizontal line in the picture below to adjust the font size.
An effective way to solve the Linux font blur problem
Jan 08, 2024 pm 11:25 PM
Linux fonts are blurry. How can I make the fonts appear clearly? Let’s take a look at the detailed tutorial below. 1. Install font files 1. Download the file provided by the tool above, then drag the file to the desktop and unzip it. As shown in the picture below, because the file has been decompressed, it is in the form of a folder. 2. Then, without clicking anything on the desktop, right-click and select Open in Terminal. Enter the command in the terminal: sudodpkg-i and press space. Open the decompressed font file on the desktop, and drag the deb package into it one after the -i of this command. After pressing Enter, an error will appear, indicating that the dependency is not installed. If the dependency error is prompted, the command input is normal, otherwise it is an incorrect command. Newbies must pay attention to spaces and capitalization.
How to change the font on an Apple phone How to change the font on an Apple phone
Mar 22, 2024 pm 08:11 PM
1. Through settings, enter and modify the font style of the mobile phone system. 2. Open the phone settings and enter [Accessibility]. 3. Click [Subtitles and Closed Subtitles]. 4. Click [Style] to make modifications.
