Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             










 
 
 

How to create a Focus effect on hover using CSS

 

 
How to create a Focus effect on hover using CSS
 


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

 

 
How to create a Focus effect on hover using CSS
 

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.

<body>
<div class="card-container">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
</body>


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.

<link href="style.css" rel="stylesheet" type="text/css">


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:

.card-container{
background-color: #f1f1f1;
}

.card{ width: 50%; aspect-ratio:1; float: left; cursor: pointer; border-radius: 15px; background-color: #afb1ae; transition: opacity 230ms; }


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.

<div class="card-container">
<div class="card card1"></div>
<div class="card card2"></div>
<div class="card card3"></div>
<div class="card card4"></div>
<div class="card card5"></div>
<div class="card card6"></div>
</div>


 

CSS

.card1{ background-color: #CC0000;height:300px;}
.card2{ background-color: #0000CC;height:300px;}
.card3{ background-color: #FFFF00;height:200px;}
.card4{ background-color: #66CC00;height:200px;}
.card5{ background-color: #FF007F;height:150px;}
.card6{ background-color: #660066;height:150px;}


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.
We insert the following code construct:

.card-container:hover .card:not(:hover){
opacity: 0.4;
}


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.


 

Here the whole example

style.css

.card-container{
background-color: #f1f1f1;
}

.card{ width: 50%; aspect-ratio:1; float: left; cursor: pointer; border-radius: 15px; background-color: #afb1ae; transition: opacity 230ms; } .card1{ background-color: #CC0000;height:300px;} .card2{ background-color: #0000CC;height:300px;} .card3{ background-color: #FFFF00;height:200px;} .card4{ background-color: #66CC00;height:200px;} .card5{ background-color: #FF007F;height:150px;} .card6{ background-color: #660066;height:150px;} .card-container:hover .card:not(:hover){ opacity: 0.4; }


The html file


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Focus effect on hover using CSS</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="card-container"> <div class="card card1"></div> <div class="card card2"></div> <div class="card card3"></div> <div class="card card4"></div> <div class="card card5"></div> <div class="card card6"></div> </div> </div> </body> </html>

Enjoy

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How to create sign up form with HTML and CSS

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...