Cascading Style Sheets (CSS) are designed using the HTML or XML (including XHTML, SVG) format. It is a style sheet language primarily utilized to describe elements through a diverse series of formatting methods. One of the methods is hovering and in this article, we will understand Hover in CSS in the following manner:
- What is Hover in CSS?
- Where is Hover Used?
- What does Hover do?
- Compatibility
- How does it work?
- Hover Background Colour Change To “Red”
- Creating Hover Opacity on Images
- Creating Text Overlay on Images
What is Hover in CSS?
CSS hover is a selector component that is utilized to style different elements when the mouse pointer hovers over them. They can be used on almost every HTML element. The hover feature in CSS holds substantial importance in web page designing.
The hover component can highlight, encode and customize web pages as per user preference in a compact and effectual web-designing program.
Where is Hover Used?
The most common examples of the viability of the hover feature can be highlighted on major shopping websites such as Flipkart and Amazon. When users hover on any product on these e-commerce websites the product is programmed to perform an automated zoom hover function to provide the customer with a better view of their selected products. Through this programming, the web page is designed to display a compact view of the entire product range accompanied with a detailed view of the product of interest in a single web page design.
What does Hover do?
The hover is a multi-functional programming tool through which the user can customize the target element with an endless number of formatting criteria. Some instances of the operational know-how of the hover feature include:
- Changing Background/Font Colour
- Embedding Hidden Text That Display on Hover
- Create Rollover Effects on Images
- Automated Zoom on Text/ Images
- Modify Image Opacity
- Text Embedding
- Image Swap
- Div. Hover
- Multiple Other CSS Hover Formatting Operations.
The hover effect basically modifies the property value of an element to enable animates changes to a stated text/image or respective elements. The embedding of CSS hover elements in a web page design transforms a regular web page into an interactive, robust and highly functional web-page. These web page designs are user-friendly and comprehensive. Hover designed web pages contain a higher consumer appeal and they entice the notice of potential customers.
Compatibility of Hover in CSS
The hover feature is compatible with all major web browsers. However, the implementation of this element on touch devices is still a challenging task. The hover in CSS enables the content accessibility on devices that do not support hover functions. It has been observed that an activated hover function on the non-supportive device can get stuck on the device.
How does Hover work in CSS?
The active pseudo-class style is dominant in CSS hover formatting and it overrides any/all subsequent link that is followed by this pseudo-class. For instance in pseudo-class “: link: visited, or: active the: hover rule needs to be placed after: link and: visited but before: active for appropriate: hover styling. The LVHA-order: :link, :hover, :visited, and :active is utilized as a reference for proper :hover formatting style.
<html>
<head>
<style>
div {
background-color: green;
padding: 18px;
display: none;
}
span:hover + div {
display: block;
}
</style>
</head>
<body>
<span>Hover Test!</span>
<div>Hidden code shows on hover</div>
</body>
</html>
In the above code, the span element is modified to merge the hover and div element by utilizing the span: hover + div element. The span element that will display on the primary landing web page will show the text “Hover test!” Further hovering on the span element reveals the div element “Hidden code shows on hover” . This embedding format is operational on the text as well as images.
Hover Background Colour Change To “Red”
<html>
<head>
<style>
p:hover, h1:hover, a:hover {
background-color: Red;
}
</style>
</head>
<body>
<h1>CSS:Hover Test Code</h1>
<div class="intro">
<h2 id="firstname">Hover Red</h2>
<p id="hometown">Hover Red</p>
<h2>Links:</h2>
<p>Hover Test Red:</p>
<a href="https://www.google.com">google.com</a>
<p>
<b>Note:</b>hello</p>
</div>
</body>
</html>
The above code customizes the <p>, <h1> and <a>element and integrates them into a common hover function. This code is designed to change the text colour to red when the mouse pointer hovers over them. The h1 and h2 component displays “CSS: Hover Test Code” and “Hover Red” respectively. The paragraph element: Hover Test Red and anchor tag: google.com gets highlighted in red when the mouse pointer hovers over them.
Creating Hover Opacity on Images
<html >
<head>
<style type="text/css">
.pic{
width:1900px;
height:1900px;
opacity: 1;
filter: alpha(opacity=100);
background: url(https://cdn.pixabay.com/photo/2013/07/13/11/29/orange-158258_1280.png) no-repeat;
}
.pic:hover
{
opacity: 0.2;
filter: alpha(opacity=30);
}
</style>
</head>
<body>
<div class="pic">
</div>
</body>
</html>
The above CSS program displays the modification of the opacity of an image on hovering. The original opacity of the image is 1; however, utilizing the opacity hover filter the same has been modified to 0.2. This code displays that by utilizing the hover element one can modify the opacity of an image and / or text.
Creating Text Overlay on Images
<html >
<head>
<style type="text/css">
.pic{
width:4000px;
height:2170px;
background: url(http://eatlogos.com/food_and_drinks/png/vector_orange_logo.png) no-repeat;
}
.text{
width:3400px;
height:2170px;
background:#FFF;
opacity:0;
}
.pic:hover .text
{
opacity:0.6;
text-align:justify;
color:#000000;
font-size:20px;
font-weight:700;
font-family:"Times New Roman", Times, serif;
padding:30px;
}
</style>
</head>
<body>
<div class="pic">
<div class="text">
Orange is a fibre rich fruit. The anti-oxidants present in an orange can help in digestion, make the skin-glow and act as an anti-aging element.
</div>
</div>
</body>
</html>
Text Layering in CSS hover is an efficient tool to embed the descriptive text of the image within the image itself. This tool aids in providing a compact overview of the image without taking up dormant space in limited web-designing space. In this code, the background image is embedded with a descriptive text that displays when the mouse pointer hovers over the text.
This concludes all the important aspects of hover in CSS and highlights its usability in web development. There are many special effects that it can bring in to our web pages. We can always try different combinations of the hover selector with other CSS properties like animation, background images, hyperlinks etc and explore its potential as we saw in some of our examples. Finally, CSS is one of the most powerful ways to design and transform webpages and hence it is imminent for web developers to acquire this skill in order to build dynamic web pages.
Check out our Full Stack Web Developer Masters Program which comes with instructor-led live training and real-life project experience. This training makes you proficient in skills to work with back-end and front-end web technologies. It includes training on Web Development, jQuery, Angular, NodeJS, ExpressJS, and MongoDB.
Got a question for us? Please mention it in the comments section of “Hover in CSS” blog and we will get back to you.