Let's use CSS to create the Focus effect which consists in making an object more visible on mouseover
If you have landed on this page, it means that you are most likely looking for new effects to insert into web pages, such as creating a Focus effect on mouseover.
But before we begin, let's understand what this effect is and how it works!
The Focus effect is one of the effects we see most often on web pages, it consists of making one object more visible when the mouse passes over another, thus improving the experience for visitors.
How to animate HTML elements on hover
Let's start by creating a new HTML document and setting up the page structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus effect on hover using CSS</title>
</head>
<body>
</body>
</html>
Once the HTML file has been created, we can proceed with the main elements that will make up our document.
We have created a container macro to which we have assigned the class card-container and two <div></div>internal elements which will be the cards on which the Web animation will be inserted and therefore the Focus effect which will be activated on mouseover.
Once this first part has been created in HTML, we can move on to writing the CSS code to format the HTML elements and define their aesthetic appearance. Once the HTML part is completed, we can in fact proceed by adding the style to each element created.
For greater convenience and organization we proceed with the creation of a new CSS file in which we will insert the desired code.
We save it and name it so we can easily recall it.
Once the file 'style.css' has been included in the HTML file, we can proceed with compiling the file by defining the style of all the elements present inside. So let's proceed with the definition of the style of the elements:
The first thing to do is decide the size and how much space the card will have to occupy. As can be seen in the previous code, the card has a width of 50% and a height proportionate to its width thanks to the properties aspect-ratio:1;.
Furthermore, using the rule cursor:pointer; we will be able to automatically change the appearance of the cursor when it is positioned over the cards.
We then add a rounded effect to the corners via the property border-radius.
The last line of CSS code present for the card elements is intended for the transition, in fact when we pass the mouse over the card in 230 milliseconds the animation of the opacity on the card will be visible.
We will go into the details shortly. Now let's define the background color of the individual cards in order to distinguish them better. So let's add a class that we'll use to assign different colors and create an even more visible effect.
Once the size and appearance of our objects have been decided, it's time to write the lines of code relating to the animation of the Focus effect.
I begin by anticipating that this is an effect that is usually created with the use of JavaScript but thanks to the recent evolutions of CSS it is possible to create it even in a more simplified way. Below we will see how it is possible to create the same effect so that it can also be achieved by those who do not know JavaScript.
The lines of code written above are related to the Focus effect, as you can see we are declaring the class card-container by inserting the effect hover. Now let's recall the class cardby inserting the value not(:hover), in this way it will be possible to focus only on the card selected on the passage of the mouse while the other elements will undergo a decrease in opacity.
Having declared several cards, we must also include the value :not so that every time we pass the mouse over one of the cards, all the other elements with the same class undergo the Focus effect in the opposite direction and therefore highlight the selected element .
Once the classes and effects we want to apply have been declared, we can proceed with the creation of the final effect, simply insert the property opacity and define the intensity of the opacity, in our case 0.4.
Thanks to this simple line of code we have imposed on the class card-container that when the mouse passes over it the opacity will be 0.4, in addition we have indicated in the class card that only the card on which the mouse will pass must respect the rule provided.
I think it's a very nice effect and very simple to create, thanks to the animation of the Focus effect you will be able to improve the user experience of your projects and increase the browsing time within web pages, offering visitors better interaction.
EN 
Español - ES 
Français - FR 
